今天，应ued的要求，该项目的滚动条被美化。虽然原来的滚动条很实用，但它并不漂亮。
用CSS美化之后
::-webkit滚动条{
height：9px；
宽度：9px；
}
：-webkit滚动条拇指{
边界半径：10px；
background颜色：RGBA（157,165,183,0.4）；
}
看起来好多了
但我们发现了一个问题，在滚动条变薄后，我们有时很难用鼠标拖动滚动条。
无意中发现滚动条实际上是由边框和背景色组成的
因此，我们的想法是将滚动条的边框设置为透明，并仅在鼠标悬停时设置滚动条的背景色
在在线搜索解决方案中，我意外地发现本文中的滚动条悬挂改变了其中提到的颜色大小
一个非常偶然的发现background剪辑：填充框，设置此属性后，背景将延伸到填充的外边缘，而不会绘制到边框。也就是说，设置此属性后，背景将仅限于内容和边距，并且边框背景不会更改。
我们做了以下修改以供参考
完整代码::-webkit滚动条{
height：9px；
宽度：9px；
}
：-webkit滚动条拇指{
边界半径：10px；
边框样式：虚线；
边框颜色：transparent；
边框宽度：2倍；
background颜色：RGBA（157,165,183,0.4）；
background剪辑：填充框；
}
：-webkit滚动条拇指：悬停{
background：RGBA（157,165,183,0.7）；
}效果如下
当鼠标不悬停时
鼠标悬停
最新评论