滚动条颜色如何设置（浏览器滚动条hover时变粗、改变颜色）

25次浏览发布时间：2023-04-25 15:40:20

今天应UED的要求对项目的滚动条进行美化，原生的滚动条虽然很实用，但确实不美观。

用了一些css美化后

::-webkit-scrollbar{
    height: 9px;
    width: 9px;
}

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