我一直在研究涉及自定义滚动条的项目,这里是代码
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body id="main">
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
</body>
问题是它只适用于chrome如何让它在每个浏览器上运行。我在互联网上搜索过,但仍然无法提供任何可靠的解决方案。提前谢谢
对不起朋友firfox,Opera Mini&Edge不支持scrollbar
style
你可以在这里查看check it
-WebKit-适用于Chrome和Safari,不确定其他浏览器是否支持自定义滚动条,但我认为它们不支持