如何在下拉菜單中隱藏moz滾動條

-1

.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並且顯示水平滾動條後。我想滾動效果，但不是滾動條。如何在下拉菜單中隱藏moz滾動條

我有成功在Chrome這樣做，但在mozila不能正常工作

任何人可以幫助我，請...

來源

2016-04-25 SPG

事情是這樣的：http://stackoverflow.com/questions/4531269/hide-vertical-scrollbar-in-select-element？ –

我已經嘗試這樣做，但無法取得成功。有沒有其他的方法來解決這個bug？ – SPG

用firefox的開發工具（F12）來檢查它 –

一種方式做到這一點可能是使用一個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選擇！您應該只在極少數情況下使用此解決方案。

來源

2016-04-25 13:01:13

如果額外的標記是不是你的問題，你可以：

包裹ul在另一個標籤，
隱藏新的父元素的overflow，然後
設置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>

來源

2016-04-25 14:00:43 Shaggy

這實際上比我的解決方案更好。 –

如何在下拉菜單中隱藏moz滾動條

回答

相關問題