道招

浏览器滚动条hover时变粗、改变颜色

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

浏览器滚动条hover时变粗、改变颜色

今天应UED的要求对项目的滚动条进行美化,原生的滚动条虽然很使用,但确实不美观。 用了一些css美化后

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

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(157, 165, 183, 0.4);
}

好看多了

但是我们发现了一个问题,就是在滚动条变细之后导致我们想要用鼠标拖动滚动条时有时有些困难。

无意中发现滚动条实际上是由边框和背景色共同组成 file

于是我们就有了思路,将滚动条的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);
} 
效果如下

鼠标未hover时 file

鼠标hover时 file

更新时间:
上一篇:对React Hooks的Capture value特性的理解下一篇:《浏览器工作原理与实践》笔记之浏览器进程

相关文章

关注道招网公众帐号
道招开发者二群