Css实现漂亮的滚动条样式（转载）

article/2025/10/31 2:08:48

转载于 https://www.jianshu.com/p/c2addb233acd

第一种

实现效果

<div class="test test-1"><div class="scrollbar"></div>
</div>

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

第二种

实现效果

<div class="test test-5"><div class="scrollbar"></div>
</div>

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

前两种都是在webkit内核的浏览器中才起作用。在火狐浏览器中改变滚动条样式：

.test-5 {scrollbar-width: thin;scrollbar-color: rgba(144, 147, 153, .3) rgba(144, 147, 153, .05);scrollbar-track-color: rgba(144, 147, 153, .05);-ms-scrollbar-track-color: rgba(144, 147, 153, .05);
}