网上找的一个方法,记录到一下自己的博客内。方便以后搬砖之用。
/*滚动条样式*/::-webkit-scrollbar {/*滚动条整体样式*/width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 4px;}::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1);}
修改前
修改后
来一个渐变比较好看得颜色
html::-webkit-scrollbar {width: 30px;height: 30px;}html::-webkit-scrollbar-thumb{background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#e52e71));background: linear-gradient(to bottom,#ff8a00,#e52e71);border-radius: 30px;-webkit-box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}html::-webkit-scrollbar-track{background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);}
效果
搬砖我是认真的。