CSS小课堂：CSS自定义页面滚动条

每个浏览器的页面都会自带页面滚动条，但是不是用户比较喜欢特立独行、与众不同，会要求361模板在做织梦模板开发的时候，改变这一点，做成自己个性的页面滚动条。

上图就是某个页面的滚动条效果，当然了，这样的效果也是可以做到某个特定的容器里的，例如某个DIV容器里，都是可以实现的，实现代码如下：

1、CSS修改整体页面的滚动条效果代码

body::-webkit-scrollbar {/*滚动条整体样式*/    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/    height: 1px;}body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/    border-radius: 10px;    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    background: #535353;}body::-webkit-scrollbar-track {/*滚动条里面轨道*/    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    border-radius: 10px;    background: #EDEDED;}

2、CSS修改某个容器的滚动条代码

cuoxin::-webkit-scrollbar {/*滚动条整体样式*/    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/    height: 1px;}.cuoxin::-webkit-scrollbar-thumb {/*滚动条里面小方块*/    border-radius: 10px;    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    background: #535353;}.cuoxin::-webkit-scrollbar-track {/*滚动条里面轨道*/    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);    border-radius: 10px;    background: #EDEDED;}

提醒一下：

需要在容器 div 上加个样式 class=”cuoxin”就可以了。