在我们实践开发过程中可能会遇到页面出现滚动条的情况，但是在惯例情况下滚动条的默许款式我们是不敢恭维的，所以我们就需要对滚动条的一些款式进行调整，换成自己想要的款式，那具体怎么做那，我们一起来看看；
款式表
.div::-webkit-scrollbar{
width:5px;
}
.div::-webkit-scrollbar-track{
background:rgb(179,177,177);
border-radius:10px;
}
.div::-webkit-scrollbar-thumb{
background:rgb(136,136,136);
border-radius:10px;
}
.div::-webkit-scrollbar-thumb:hover{
background:rgb(100,100,100);
border-radius:10px;
}
.div::-webkit-scrollbar-thumb:active{
background:rgb(68,68,68);
border-radius:10px;
}
说明
::-webkit-scrollbar
此特点是设置整个滚动条的款式
::-webkit-scrollbar-track
此特点是设置滚动条的滚动区域的款式即滚动条的轨迹
::-webkit-scrollbar-thumb
次特点是设置滚动条可拖拽部分的款式即滚动条的滑块
css里面怎么设置为滚动形式
介绍css改动滚动条款式的demo，直接上代码：
/*demo.html*/
Document
百度为您找到相关成果约26,500,000个
1.新建一个HTML文档,这儿设立一下根本的架构。
2.再新建一个CSS文件,用link相关一下HTML文档。
3.创建DIV标签,并且往里边填充内容。
4.先设定一下滚动条内框的大小,用border先来查看是否有超出,这儿能够看出超出了许多内容。
5.overflow-y:scroll;overflow-x:scroll;…
查看更多内容…
div滚动条款式设置-百度经历
jingyan.baidu.com
2018年10月30日通过上文中的实例学习信任小伙伴们就能够做出自己喜爱的滚动条了、如果文档中会有多个滚动条呈现,而且期望所有的滚动条款式是一样的,那么伪元素前面不需要加上…
改动滚动条的默许款式_菜鸟的博客-CSDN博客_改动滚动条款式
2019年4月30日/*滚动条全体款式*/width:4px;/*高宽分别对应反正滚动条的尺度*/height:4px;}.dataTables_scrollBody::-webkit-scrollbar-thumb{/*滚动条里边小方块*/bo…
2019年6月14日::-webkit-scrollbar滚动条全体部分::-webkit-scrollbar-thumb滚动条里边的小方块,能向上向下移动(或往左往右移动,取决于是笔直滚动条还是水平滚动条)::-we…
/*demo.css*/
*{
padding:0;
margin:0;
}
div{
width:200px;
height:300px;
border:1pxsolidpink;
margin-top:20px;
margin-left:20px;
overflow:hidden;
overflow-y:scroll;
}
div::-webkit-scrollbar{/*设置滚动条全体特点*/
width:5px;
}
div::-webkit-scrollbar-track{/*滚动条轨迹特点*/
background-color:transparent;
}
div::-webkit-scrollbar-thumb{/*滚动条内滑块特点*/
/*background-color:pink;*/
background:url(./images/w-bar.png)no-repeatcentercenter;
background-size:100%100%;/*如果用背景图，这儿要带上，不然背景图不能顶到头*/
/*我用的背景图尺度是5*75的*/
}
