Css实现漂亮的滚动条样式
原文链接：//www.greatytc.com/p/c2addb233acd
各位、先看下第一个实现效果
image
产品经理：这个不好看，换一个
我：好看，再说不好看我要拔刀了
实现代码
-
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; }
产品经理：我有枪🔫
我：马上改，您看这是第二个样子
image
实现代码
-
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; }
产品经理：这个还可以，晚上给你加个鸡腿，好好加班
我：****。
顺便在这元宵佳节，祝各位节日快乐🎉🎉🎉
image
这里卿洋
愿喜❤️
</article>
