CSS怎么修改滚动条样式

这篇文章主要介绍了CSS怎么修改滚动条样式，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　CSS怎么修改滚动条样式,很多做网站开发的小伙伴,为了体现网页的个性化美观,想自定义修改滚动条的样式。但是不知道怎么操作,下面小编就给你安排!

　　修改滚动条样式实现代码HTML

<divclass="testtest-1">
　　<divclass="scrollbar"></div>
　　</div>

　　修改滚动条样式实现代码CSS

　.test{
　　width:50px;
　　height:200px;
　　overflow:auto;
　　float:left;
　　margin:5px;
　　border:none;
　　}
　　.scrollbar{
　　width:30px;
　　height:300px;
　　margin:0auto;
　　}
　　.test-1::-webkit-scrollbar{
　　/*滚动条整体样式*/
　　width:10px;/*高宽分别对应横竖滚动条的尺寸*/
　　height:1px;
　　}
　　.test-1::-webkit-scrollbar-thumb{
　　/*滚动条里面小方块*/
　　border-radius:10px;
　　box-shadow:inset005pxrgba(0,0,0,0.2);
　　background:#535353;
　　}
　　.test-1::-webkit-scrollbar-track{
　　/*滚动条里面轨道*/
　　box-shadow:inset005pxrgba(0,0,0,0.2);
　　border-radius:10px;
　　background:#ededed;
　　}

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS怎么修改滚动条样式”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!