ドロップダウンメニューで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には最大高さ：400pxがあり、水平スクロールバーが表示されます。私はスクロール効果が欲しいが、スクロールバーはしたくない

私はクロームでこれを行うには成功を持っていますが、モジラではない誰もが...スクロールバーをカバーするためにDIVを使用することができ、これを行うに

Answer 1

1つの方法は、私を助けてくださいすることができ、適切

動作します。コンテナと同じ背景色のdivを追加し、スクロールバーの上に配置するだけです。私はdivを配置するためにJavaScriptまたは好ましくはjQueryを使用し、2つの要素を重複させることを覚えておくことをお勧めします。これは、例えば、両方の位置を絶対値に設定することで実行できます（コンテナの相対位置への相対位置）。
ここに簡単な例があります：
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>