可以看到从视觉上看滚动滑块的宽度/高度发生了改变：
-webkit-scrollbar-corner 伪元素
::-webkit-scrollbar-corner是垂直滚动条和水平滚动条交界的部分，我们可以单独控制其样式，例如添加背景色：
.rect::-webkit-scrollbar-corner {
background-color: #7f1d1d;
}注意看到右下角区域的变化：
学习总结
讲完这六个伪元素，再回过来看下面的图，就非常清晰了：
可以看到滚动条在设计上是非常复杂的，但正因为此，才可以满足更多的个性化定制需求，虽然带有 -webkit-前缀，不是 w3c 标准，但是由于 Chrome 一统天下，这已经成为事实上的浏览器标准了。
实战
再回到最初的需求：要细一些，宽度6px，颜色淡一些，#000000 8%不透明度，hover状态时宽度 10px，颜色 #000000 16%不透明度。假设现在滚动区域是一个类为 rect 的 div，结构如下：
<div class="rect"> <!-- 滚动区域 --> </div>
最初写的 CSS 代码如下：
.rect::-webkit-scrollbar {
width: 6px;
height: 0;
background-color: transparent;
}
.rect::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.08);
}
.rect::-webkit-scrollbar-thumb:hover {
width: 10px;
background-color: rgba(0, 0, 0, 0.16);
}结果发现滚动条的颜色生效了，但是 hover 上去之后宽度并没有变宽，这是因为为 -webkit-scrollbar-thumb单独设置宽度是无效的，必须借用 background-clip来实现类似效果：
.rect::-webkit-scrollbar {
width: 10px;
height: 0;
background-color: transparent;
}
.rect::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.08);
border-left: 4px solid transparent;
background-clip: padding-box;
}
.rect::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.16);
border: 0;
}最终效果如下：
本文地址：百科问答频道 https://www.neebe.cn/wenda/903190_3.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
