html滚动条设置，html滚动条代码-嗨游网

可以看到从视觉上看滚动滑块的宽度/高度发生了改变：

html滚动条设置，html滚动条代码

-webkit-scrollbar-corner 伪元素

::-webkit-scrollbar-corner是垂直滚动条和水平滚动条交界的部分，我们可以单独控制其样式，例如添加背景色：

.rect::-webkit-scrollbar-corner {
  background-color: #7f1d1d;
}

注意看到右下角区域的变化：

html滚动条设置，html滚动条代码

学习总结

讲完这六个伪元素，再回过来看下面的图，就非常清晰了：

html滚动条设置，html滚动条代码

可以看到滚动条在设计上是非常复杂的，但正因为此，才可以满足更多的个性化定制需求，虽然带有 -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;
}

最终效果如下：

html滚动条设置，html滚动条代码