如何在下拉菜单中隐藏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滚动条

回答

相关问题