如何在下拉菜單中隱藏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選項！ 僅應在極少數情況下才使用此解決方案。

Answer 2

如果多余的標記對您來說不是問題，則可以：

1. 將ul包裹在另一個標簽中，
2. 隱藏新父元素的overflow ，然后，
3. 將ul的width設置為父級的100％加上滾動條的寬度。

 *{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;} 

 <div> <ul> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </ul> </div>