前言：我们做前端时，会遇到一些需求，要求把默认浏览器的滚动条样式给改写了，诶。好好的改它干啥了，也带不来用户体验，就是好看点嘛！实现原理其实是用了伪元素，webkit的伪元素实现很强，可以把滚动条当成一个页面元素来定义，再结合一些CSS3属性，比如圆角、渐变、rgba等等。最常见的伪元素，我们最熟悉的元素之前和元素之后（::before/::after）【伪类（:hover/:link）】。这里写了一个Demo，来看看...
一、HTML
<div class="banner_box"></div>
二、CSS
<style>
.banner_box {
width: 100%;
height: 2000px;
}
/*滚动条样式*/
/*滚动条整体部分*/
::-webkit-scrollbar {
width: 8px;
}
/*滚动条小方块*/
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.6);
-webkit-border-radius: 5px; /* Safari 和 Chrome */
-moz-border-radius: 5px; /* Firefox */
-o-border-radius: 5px; /* Opera */
border-radius: 5px; }
/*滚动轨道两端按钮*/
::-webkit-scrollbar-button {
-webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1);
/*border-radius: 10px;*/
background-color: #555;
}
/*滚动轨道 内阴影*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1);
/*border-radius: 10px;*/
background-color: #F5F5F5;
}
</style>
三、结果
总结：这种CSS特性，可惜不被IE和火狐兼容，其他的都能看到结果，另外还有一种办法，通过div去改写滚动条。
交流群 : 192713488