CSS3⾃定义滚动条样式-webkit-scrollbar（overflow-x：
scro。。。
当内容超出容器时，容器会出现滚动条，其⾃带的滚动条有时⽆法满⾜我们审美要求，那么我们可以通过css伪类来实现对滚动条的⾃定义。
⾸先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，⼀般来说滑块的颜⾊⽐轨道的颜⾊深。
滚动条的css样式主要有三部分组成：
  1、.test::-webkit-scrollbar  定义了滚动条整体的样式；
2、.test::-webkit-scrollbar-thumb  滑块部分；
  3、.test::-webkit-scrollbar-thumb  轨道部分；
下⾯以overflow-y:auto；为例（overflow-x:auto同）
html代码：
<div class="test test-1">
<div class="scrollbar"></div>
</div>
css代码：
.test{
width: 50px;
height: 200px;css去掉滚动条
overflow: auto;
float: left;
margin: 5px;
border: none;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px;    /*⾼宽分别对应横竖滚动条的尺⼨*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滚动条⾥⾯⼩⽅块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条⾥⾯轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
效果如下：
以上就可以做出⾃⼰喜欢的滚动条了；
如果⽂档中会有多个滚动条出现，⽽且希望所有的滚动条样式是⼀样的，那么伪元素前⾯不需要加上class、id、标签名等之类的任何东西。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。