CSS样式——自定义滚动条

如何使用 CSS 创建自定义滚动条

准备工作做好了，接下来进入本教程中有趣的部分。本节内容的第一部分会介绍一些滚动条样式相关的 CSS 属性。第二部分我们会实现 4种不同类型的滚动条，能为你之后制作自己的滚动条提供一些思路。

滚动条样式相关的 CSS 属性

很不幸，现在还没有对这些 CSS 属性的标准化跨浏览器支持。Firefox 和一些基于 Webkit 内核的浏览器（如 Chrome、Edge、Safari）各自提供了不同的属性。

本教程主要针对 Webkit 内核的浏览器，因为它们提供了更多样式属性，不过我也会简单介绍一下 Firefox。

Webkit 滚动条样式属性

::-webkit-scrollbar – 整个滚动条

::-webkit-scrollbar-track – 滚动条的滚动区域（轨道）

::-webkit-scrollbar-thumb – 滚动条的可拖拽部分（滑块）

以下是可用但不常用的属性：

::-webkit-scrollbar-button – 滚动条两端的上/下（或左/右）按钮

::-webkit-scrollbar-track-piece – 滚动条轨道未被滑块覆盖的部分

::-webkit-scrollbar-corner – 垂直滚动条和水平滚动条交汇的部分

Firefox 滚动条样式属性

Firefox中当前可用的两个滚动条样式属性：

scrollbar-width – 控制滚动条的宽度，只有两个可选项：auto 或 thin

scrollbar-color – 接收两个颜色，依次指定滑块和轨道的颜色

了解了自定义滚动条的样式属性，我们通过几个例子将它们付诸实践。

暗色主题滚动条

现在暗色主题的网站非常流行。坚持使用默认的滚动条可能会惹恼用户，因为它与整个网站的暗色主题不搭。

用我们新学的知识创建一个暗色主题的滚动条，它的边框是圆形的（灵感来自 CSS Tricks 网站）：

放到网页最顶部的css中

html::-webkit-scrollbar {
    width:20px;
}
html::-webkit-scrollbar-track {
    background-color:black;
}
html::-webkit-scrollbar-thumb {
    background:#4e4e4e;
    border-radius:25px;
}

最终效果在截图中比较难看清，不过可以看到轨道是黑色的、滑块是深灰色的。

 

图案滚动条

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

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

/*隐藏滚动条设置滚动条样式*/
    /*::-webkit-scrollbar{
      width: 3px;
 
    }
    ::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
      background-color: #fff;
      border-radius: 3px;
    }*/
    ::-webkit-scrollbar {width: 20px;}
    ::-webkit-scrollbar-track {
          background-image: repeating-linear-gradient(45deg, #a8ad84 0, #99d6b4 1px, transparent 0, transparent 50%);
    background-size: 10px 10px;
    }
    ::-webkit-scrollbar-thumb {    
      background: transparent;
    border-radius: 5px;
    border: 2px solid #a1dcbe;
    box-shadow: inset 1px 3px 5px #9ed9bb;   
    }

　

“动态”渐变滚动条

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

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

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;