Css实现漂亮的滚动条样式
各位、先看下第一个实现效果
产品经理:这个不好看,换一个
我:好看,再说不好看我要拔刀了
实现代码
-
HTML
<div class="test test-1"> <div class="scrollbar"></div> </div>
-
CSS
.test { width : 50px; height : 200px; overflow: auto; float : left; margin : 5px; border : none; } .scrollbar { width : 30px; height: 300px; margin: 0 auto; } .test-1::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #535353; } .test-1::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 10px; background : #ededed; }
产品经理:我有枪🔫
我:马上改,您看这是第二个样子
实现代码
-
HTML
<div class="test test-5"> <div class="scrollbar"></div> </div>
-
CSS
.test-5::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-5::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); } .test-5::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background : #ededed; border-radius: 10px; }
作者:nomooo
链接:https://www.jianshu.com/p/c2addb233acd
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。