css3自定义滚动条

开发项目时，感觉浏览器自带的滚动条样式不太美观，也看到过微信公众号等一些网站对滚动条做了美化，今天就百度了一下，写篇自定义 滚动条的文章供大家参考
直接看代码：给整个body区域的滚动条改变样式

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;
}

改变后的效果如下：右侧的滚动条改为了其他的颜色

上面是对整个页面滚动条的修改，也可以针对某个div区域的修改，
在 div 上加个样式 class=”info2”，再在样式表中使用下面的就是把body改为具体某个区域的样式

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

效果图

OK了。。。