Image placeholder

使用 CSS 自定义浏览器的滚动条

Image placeholder
F2EX 2017-09-03

自定义滚动条越来越受欢迎,它会给网站带来一些不同的感觉。实现自定义滚动条的方法有很多,你可以使用 JavaScript 或 jQuery 插件,但是使用 CSS 将是最直接的方法。

注意:你应该在自定义滚动条中使用 -webkit- 浏览器前缀,以便在使用 Webkit(和Blink)渲染引擎的浏览器中使用。

术语

-webkit-scrollbar 由七个不同的伪元素组成,它们一起构成一个完整的滚动条 UI 元素:

  1. ::-webkit-scrollbar 滚动条本身的背景。/* 1 */
  2. ::-webkit-scrollbar-button 滚动条上的方向按钮(向上向下按钮)。/* 2 */
  3. ::-webkit-scrollbar-track 滚动条轨道区域。/* 3 */
  4. ::-webkit-scrollbar-track-piece 滚动条空白区域轨道。/* 4 */
  5. ::-webkit-scrollbar-thumb 滚动条上的拖动按钮。/* 5 */
  6. ::-webkit-scrollbar-corner 滚动条轨道上的底角(垂直滚动条和横向滚动条相交的位置)。/* 6 */
  7. ::-webkit-resizer 可调整大小的按钮(垂直滚动条和横向滚动条相交的位置)。/* 7 */

了解这些术语后,就开始吧!

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Customize the Browser's Scrollbar with CSS</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="scrollbar" id="style-1">
            <div class="force-overflow"></div>
        </div> 
    </body>
</html>

CSS

.scrollbar {
    background-color: #F5F5F5;
    float: left;
    height: 300px;
    margin-bottom: 25px;
    margin-left: 22px;
    margin-top: 40px;
    width: 65px;
       overflow-y: scroll;
}

.force-overflow {
    min-height: 450px;
}

此时的滚动条效果如下图所示:

现在,我们使用 scrollbar 伪元素来创建自定义滚动条。它将以 6px 的新宽度替换其默认宽度,然后添加 background-color: #F5F5F5

. . .

#style-1::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
} 

. . .

由于我们知道滚动条包含 track , buttonthumb(轨道,按钮和拖动条),我们现在将给予一个个性的拖动条。使用带有 webkit 前缀的伪元素(即 ::- webkit-scrollbar-thumb ),并设置 scrollbar-thumb 的 background-color

. . .

#style-1::-webkit-scrollbar-thumb {
    background-color: #000000;
}

. . .

现在滚动条看起来像这样:

然后在 scrollbar-track (滚动条轨道)上使用 box-shadow ,并在滚动条和滚动条轨道之间增加对比度。

. . .

#style-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

这样就完成了一个完整的自定义滚动条效果,就像下面这样:

你还可以进行更多的尝试:

总结

使用 CSS 自定义滚动条的方式很简单,但看起来有点粗糙。但是,像 Windows ,OS X 和 Linux 这样的操作系统有着自己的滚动条风格。自定义滚动条虽然可以很个性,但同时也导致和操作系统的风格不统一。记住,你应该让滚动条看起来简单,而不是太花哨。


2017-09-21