Question

td

我有下拉列表的ul和li标签，ul有max-height：400px，显示水平滚动条后。我想滚动效果，但不是滚动条。

我在chrome中成功完成此操作，但在mozila中无法正常工作

任何人都可以帮助我......

Answer 1

执行此操作的一种方法是使用div来掩盖滚动条。只需添加一个与其容器具有相同背景颜色的div，并将其放在滚动条的顶部。我建议使用JavaScript或者最好使用jQuery定位div并记住使这两个元素重叠;这可以通过将他们的两个位置设置为绝对（以及他们的容器的位置为相对位置）来完成这是一个简单的例子：
https://jsfiddle.net/jffe4sy3/1/
它不漂亮或非常通用，但它在大多数情况下都有效。

HTML：

<select id="select_id" class="select" size="5">
    <option value="1" >test1</option>
    <option value="2" >test2</option>
    <option value="3" SELECTED>test3</option>
    <option value="4" >test4</option>
    <option value="5" >test5</option>
</select>
<div id="div_id" class="cover"></div>

CSS：

.select{
  height:60px; //set this to your max-height (i.e.  max-height:400px;)
  position:absolute;
}
 .cover {
 background-color:white;
 position:absolute;
 border-left:solid grey 1px;
 width:16px;
}

JavaScript / jQuery：

$("#div_id").height($("#select_id").height()+2); // the height of the select + 2px to include the border
$("#div_id").css("margin-left", $("#select_id").width()-15); // the width of the select minus the scrollbar

但我建议您在适用时始终使用display:none选项！您应该只在极少数情况下使用此解决方案。

Answer 2

如果额外加价不是您的问题，您可以：

将ul换行到另一个标签
隐藏新父元素的overflow，然后隐藏
将width的{{1}}设置为父级的100％加上滚动条的宽度。

ul

*{box-sizing:border-box;margin:0;padding:0;}
div{
  border:1px solid #000;
  margin:20px auto;
  overflow:hidden;
  height:250px;
  width:90%;
}
ul{
  max-height:100%;
  list-style:none;
  overflow:auto;
  width:calc(100% + 20px)
}
li{
  height:50px;
}
li:nth-child(odd){background:#000;}
li:nth-child(even){background:#999;}

如何在下拉菜单中隐藏moz滚动条

2 个答案: