- 网站精华
css自定义滚动条样式
简介 适合在谷歌或基于谷歌内核的浏览器环境下运行
<h5><span class="ql-size-large">滚动条的样式主要有三部分组成：</span></h5><pre class="ql-syntax" spellcheck="false">1、::-webkit-scrollbar 滚动条整体样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；
</pre><p><br></p><p><span class="ql-size-large">HTML代码</span></p><pre class="ql-syntax" spellcheck="false"><div class="box">
<div class="scrollbar"></div>
</div>
</pre><p><br></p><p><span class="ql-size-large">CSS代码</span></p><p><br></p><pre class="ql-syntax" spellcheck="false"> .box{
width: 150px;
height: 200px;
overflow: scroll;
margin: 100px;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;
}
/*滚动条整体样式*/
.box::-webkit-scrollbar {
width: 10px;
height: 1px;
}
/*滚动条滑块*/
.box::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
/*滚动条轨道*/
.box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 10px;
background: #ccc;
}
</pre><p><br></p>
分享到：
转载：
喜欢 0
收藏
暂无评论信息