js添加minwidth无横向滚动条

JavaScript010

js添加minwidth无横向滚动条,第1张

解决这个问题的思路:设置下拉菜单的最大宽度,然后文字超出时,出现横向滚动条

原因：因为表格左侧固定列，并且列宽大于了滚动条的横向宽度，导致将横向滚动条，遮盖住了。解决方式：对应表格的滚动条，设置min-width，需要大于固定列的宽度，注意：滚动条是表格哪一级的class出现的，需要对应写这一级容器的滚动条样式。

<body>

<script>

function show() {

document.getElementById("aaaa").style.display = "block"

}

function hide(){

document.getElementById("aaaa").style.display = "none"

}

</script>

<div style="width:180px">

<div style="float:left">

<button onclick="show()" >显示</button>

<button onclick="hide()" style="float:right">关闭</button>

</div>

<br>

<div id="aaaa" style="height:100pxwidth:180pxfloat:leftoverflow-y:scrolloverflow-x:hidden">

<table border="1" style="border-collapse:collapse" >

<tr><td>c </td>

<td>d</td>

<td>3</td>

<td>3</td>

<td>3</td><td>3</td><td>3</td><td>3</td> <tr><td>c </td>

<td>d</td>

<td>3</td>

<td>3</td>

<td>3</td><td>3</td><td>3</td><td>3</td> <tr><td>c </td>

<td>d</td>

<td>3</td>

<td>3</td>

<td>3</td><td>3</td><td>3</td><td>3</td> <tr><td>c </td>

<td>d</td>

<td>3</td>

<td>3</td>

<td>3</td><td>3</td><td>3</td><td>3</td> <tr><td>c </td>

<td>d</td>

<td>3</td>

<td>3</td>

<td>3</td><td>3</td><td>3</td><td>3</td> <tr><td>c </td>

<td>d</td>

<td>3</td>

<td>3</td>

<td>3</td><td>3</td><td>3</td><td>3</td> <tr><td>c </td>

<td>d</td>

<td>3</td>

<td>3</td>

<td>3</td><td>3</td><td>3</td><td>3</td>

</tr>

</table>

</div>

</div>

</body>

改成：

var top=parseInt(hotListDiv.style.top)

        if (top <=-700) {

            hotListDiv.style.top = "0px"

        }

        else {

            hotListDiv.style.top = (top-70)+"px"

        }