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

Question

.no-scroll::-webkit-scrollbar {display:none;} /* Safari */
.no-scroll::-moz-scrollbars {display:none;}
.no-scroll::-o-scrollbar {display:none;} /* opera */
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}

我有 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 选项!您应该只在极少数情况下使用此解决方案。