前言：我们做前端时，会遇到一些需求，要求把默认浏览器的滚动条样式给改写了，诶。好好的改它干啥了，也带不来用户体验，就是好看点嘛！实现原理其实是用了伪元素，webkit的伪元素实现很强，可以把滚动条当成一个页面元素来定义，再结合一些CSS3属性，比如圆角、渐变、rgba等等。最常见的伪元素，我们最熟悉的元素之前和元素之后（::before/::after）【伪类（:hover/:link）】。这里写了一个Demo，来看看...

一、HTML

<div></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: -moz-border-radius: -o-border-radius: border-radius: 5px; } ::-webkit-scrollbar-button { -webkit-box-shadow: inset 0 0 6px rgba(85,85,85,1); background-color: #555; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1); background-color: #F5F5F5; } </style>

　三、结果

总结：这种CSS特性，可惜不被IE和火狐兼容，其他的都能看到结果，另外还有一种办法，通过div去改写滚动条。