如何设置滚动条样式，CSS设置自定义滚动条样式

需要注意的重点是，你可以使用 hover 和 active 伪元素来进一步设置滚动条样式。本例中，当你把鼠标悬停在滑块上以及拖动滑块时它的颜色会变成更深的灰色。

html::-webkit-scrollbar {    width: 10px;  } html::-webkit-scrollbar-track {    background: rgb(179, 177, 177);    border-radius: 10px; } html::-webkit-scrollbar-thumb {    background: rgb(136, 136, 136);    border-radius: 10px;  } html::-webkit-scrollbar-thumb:hover {    background: rgb(100, 100, 100);    border-radius: 10px;  } html::-webkit-scrollbar-thumb:active {    background: rgb(68, 68, 68);    border-radius: 10px;  }

最终效果：

图案滚动条

这个部分的重点是使用重复的线性渐变在滚动条轨道中创建图案效果，这个方法也可以运用在滑块上。

另外一点需要注意的是，你也可以为滑块设置边框样式，利用边框样式可以创建许多有趣的效果。本例中，我把滑块的背景颜色设为透明，这样就可以在滚动的同时看到轨道中的图案。

html::-webkit-scrollbar {    width: 20px;  } html::-webkit-scrollbar-track {   background-image: repeating-linear-gradient(45deg, red 0, red 1px, transparent 0, transparent 50%);   background-size: 10px 10px; } html::-webkit-scrollbar-thumb {    background: transparent;    border-radius: 5px;    border: 2px solid black;    box-shadow: inset 1px 1px 5px black ;   }

最终效果：

“动态”渐变滚动条

这个例子用到了线性渐变，并使用了一个小技巧：利用滑块的阴影使得滚动条在页面滚动时看起来像是在变换颜色，实际上是轨道的背景透过滑块显示了出来。

阴影遮盖住了滑块之外的所有轨道空间，又由于滑块是透明的，所以轨道背景的渐变颜色透过它显示出来。

html::-webkit-scrollbar {    width: 20px;  }   html::-webkit-scrollbar-track {    background:  linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);  } html::-webkit-scrollbar-thumb {    background: transparent;    box-shadow: 0px 0px 0px 100vh black;  }

最终效果：

自定义滚动条的限制及备选方案

显然，创建自定义滚动条存在一些问题。首先是缺少跨浏览器支持。其他可能问题包括：无法为滚动条增加过渡和动画效果、移动设备不支持自定义滚动条。

一个备选方案是：隐藏默认的滚动条，并使用外部库来实现，但这可能会影响页面性能。而且可能还有其他潜在的可用性问题，因为这些库依赖 JavaScript 来模拟原生的滚动条行为。

下面我会介绍两个用于制作滚动条的流行开源库。

SimpleBar

使用原生滚动行为的自定义滚动条 JavaScript 库：操作简单、轻量、易用、跨浏览器。- Grsmto/simplebar

顾名思义，SimpleBar 旨在简化创建自定义滚动条的过程。唯一的缺点是它不能作为网站的主滚动条（译注：即根元素的滚动条）来使用，也不支持表格元素、文本输入区域和下拉选择框。

SimpleBar 主要适用于诸如动态聊天应用或一些在页面内部元素中有滚动行为的场景。

Overlay Scrollbars

一个隐藏原生滚动条、提供自定义样式滚动条的插件，保留了原生的功能和体验。- KingSora/OverlayScrollbars

Overlay Scrollbars 与 SimpleBar 很相似，但是它提供了对 HTML body 元素的支持。这意味着除了跨浏览器支持和移动端支持等特性，还可以把它作为网站的主滚动条来使用。

总结

希望本文能让你深入理解使用 CSS 自定义滚动条样式的工作原理。