很多使用场景下，其实用户已经很少需要用鼠标去特意选中或者拉动滚动条。大多只是给用户以提醒，页面还有多长。
所以我想弱化滚动条的宽度和颜色，尽可能地减少它对网页整体效果的侵入。
一：代码实现
具体实现如下，直接放在css里即可
// 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
::-webkit-scrollbar {
width: 5px;
height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
border-radius: 10px;
}
// 滑块
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #adadaba4;
// height: 50px; // 整体设了宽高后，这里宽高是无效的
// width: 50px;
}
// 轨道
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #fff;
}
滚动条具体由滑块(thumb)和轨道(track)组成，但是必须设置webkit-scrollbar整体的样式，否则滑块和轨道的样式都不生效。
如果不特意设置横向和纵向滚动条，webkit-scrollbar会同时作用域横向和纵向。所以这时整体的宽高，height作用于横向，width作用于纵向。而且这里设置了宽高，滑块和轨道的宽高都不再生效。
二：效果对比
修改前的效果
弱化后的效果
三：自定义滚动条效果
实例地址：CodingLife
