使用纯 CSS 自定义滚动条样式

使用纯 CSS 设置滚动条样式。无论你是在工作中遇到这个需求，还是想给自己的网站添加个性化元素，这个视频都可以帮到你。

先看最常用的、非标准化的 CSS 设置方式。在以 webkit 为核心的浏览器中，（如 Chrome、新 Edge）我们可以通过 ::-webkit-scrollbar 设置滚动条的样式：

::-webkit-scrollbar {
  width: 3px;
  background: linear-gradient(
    to bottom,
    hsl(0deg, 100%, 50%, 0.4) 0%,
    hsl(40deg, 100%, 50%) 20%,
    hsl(80deg, 100%, 50%) 30%,
    hsl(120deg, 100%, 50%) 40%,
    hsl(180deg, 100%, 50%) 50%,
    hsl(250deg, 100%, 50%) 80%,
    hsl(320deg, 100%, 50%, 0.4) 100%
  );
  border-radius: 4px;
}

通过 ::-webkit-scrollbar-thumb 设置滚动条滑动块的样式：

body::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    hsl(0deg, 100%, 50%, 0) 0%,
    hsl(0deg, 100%, 100%, 0.9) 20%,
    hsl(0deg, 100%, 100%, 0.9) 80%,
    hsl(0deg, 100%, 50%, 0) 100%
  );
  border-radius: 100%;
}

这两个伪元素可以单独使用，设置全局滚动条样式，也可以在能够滚动的元素上设置（如设置了 scroll-y: always 的元素）：

div::-webkit-scrollbar {
}
div::-webkit-scrollbar-thumb {
}

还有其它一些属性可以参考这个表格，但经过实测并没有太大用处：

属性	作用
::-webkit-scrollbar-button	滚动条的上下按钮样式。
::-webkit-scrollbar-track-piece	除滑动块以外的滚动条部分的样式。
::-webkit-scrollbar-corner	横、竖滚动条交界的角落区域样式。

也许是这个需求比较普遍，W3C 组织开始把滚动条相关的属性标准化了，目前还是草案阶段，标准化的滚动条样式属性，可以在能够滚动的元素中，使用 scrollbar-color 设置滚动条颜色，使用 scrollbar-width 设置滚动条宽度，可以取 thin 窄滚动条、auto 默认宽度，none 隐藏滚动条。 目前，草案只提供了这两个属性，后期可能会添加更多样式属性，目前这两个属性只有 firefox 浏览器支持。

body {
  scrollbar-color: black;
  scrollbar-width: thin | auto | none;
}

对于 IE，可以通过给滚动元素设置 scrollbar-track-color 来设置滚动条的背景色，使用 scrollbar-face-color 来设置滑动块的颜色：

body {
  scrollbar-face-color: #00ff00;
  scrollbar-track-color: #ff0000;
}

还有更多属性，有兴趣的可以自己研究一下：

• scrollbar-3dlight-color
• scrollbar-highlight-color
• scrollbar-track-color
• scrollbar-arrow-color
• scrollbar-shadow-color
• scrollbar-dark-shadow-color

小结

好了，这个就是使用纯 CSS 设置滚动条样式的方法，你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！