::-webkit-scrollbar-thumb {
border-radius
:
10px
;
background-color
:
rgba
(
157
,
165
,
183
,
0.4
);
但是我们发现了一个问题，就是在滚动条变细之后导致我们想要用鼠标拖动滚动条时有时有些困难。
无意中发现滚动条实际上是由边框和背景色共同组成
于是我们就有了思路，将滚动条的border设置成透明的，只有鼠标hover时才将滚动条的border背景色设置出来
在网上搜索解决方案，无意间发现这篇文章
滚动条悬浮改变颜色大小
又很偶然的发现
background-clip: padding-box
，设置该属性后背景延伸至内边距（padding）外沿，不会绘制到边框处，也就是说设置该属性后，背景将被限制在内容和边距之内，边框背景不会改变。
我们参考进行了下面的改动
::-webkit-scrollbar{
height: 9px;
width: 9px;
::-webkit-scrollbar-thumb {
border-radius: 10px;
border-style: dashed;
border-color: transparent;
border-width: 2px;
background-color: rgba(157, 165, 183, 0.4);
background-clip: padding-box;
::-webkit-scrollbar-thumb:hover {
background: rgba(157, 165, 183, 0.7);
