滚动条相关--样式篇

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

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

滚动条分为两部分组成：

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

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

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