关于滚动条不得不说的事情

页面中许多地方需要使用到滚动条，但是浏览器自带的滚动条样式已经让产品经理审美疲劳，本篇暂且记录本人项目中使用的滚动条样式修改。

滚动条分为两部分组成：

可以滑动的部分，我们叫它滑块滚动条的轨道，即滑块的轨道

一般来说滑块的颜色比轨道的颜色深。

HTML

<div class="test"> </div>

css

.test{ width:300px; height:800px; overflow: hidden; overflow-y: auto; } //一般的，我们直接设置滚动条整体样式的宽度为0，滚动条就会消失不见。 .test::-webkit-scrollbar { width: 0px; } //滚动条里面小方块 .test::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #ccc; } //滚动条里面轨道 .test::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #EDEDED; }