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

介绍

自定义滚动条越来越流行，您可能会遇到具有独特滚动条的网站，使网站感觉和外观不同。基本上有几种方法可以实现自定义滚动条。

在本教程中，我们将使用 CSS3，这是最直接的方式。但是，有一些 jQuery 插件可以帮助自定义滚动条，但我不喜欢向我的网站添加更多 JavaScript。如果您是设计师、摄影师或者您只是希望您的网站有一个很酷的滚动条，请继续使用 jQuery 插件。

了解滚动条术语

自定义滚动条暴露在 -webkit 供应商前缀后面，以便在使用 Webkit（和 Blink）渲染引擎的浏览器中使用。

-webkit-scrollbar 由七个不同的伪元素组成，共同构成一个完整的滚动条 UI 元素：

::-webkit-scrollbar 栏本身的背景。
::-webkit-scrollbar-button 滚动条上的方向按钮。
::-webkit-scrollbar-track 进度条“下方”的空白区域。
::-webkit-scrollbar-track-piece 进度条最上层未被拇指覆盖。
::-webkit-scrollbar-thumb 可拖动滚动元素根据可滚动元素的大小调整大小。
::-webkit-scrollbar-corner 可滚动元素的底角，两个滚动条相交的地方。
::-webkit-resizer 可拖动的大小调整手柄，出现在某些元素底角的滚动条角上方。

现在您已经熟悉了这些术语，让我们开始吧！

设置项目

首先，创建 index.html 和 style.css 文件，并使用代码编辑器打开当前目录。

索引.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>

您需要在 HTML 文件中包含 style.css 文件。您可以输入上面的 HTML 代码，或者只是复制并粘贴到您的 HTML 文件中。

首先，我们设置.scrollbar（类）width, height, background-color，然后设置overflow-y: scroll得到垂直滚动条。我们将 min-height: 450px 设置为 .force-overflow div 以便出现滚动条（因为我们使用 overflow-y 属性在 .scrollbar 类中滚动）。

样式.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;
}

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

样式.css

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

既然我们知道滚动条包含 track、button 和 thumb，我们现在要给拇指一个时尚的外观。我们使用带有-webkit前缀的伪元素（即::-webkit-scrollbar-thumb）并设置滚动条拇指background- color。

样式.css

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

之后，滚动条如下所示：

我们在 scrollbar-track 上使用 box-shadow 使其时尚，并在滚动条和滚动条轨道之间添加对比。

样式.css

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

结论

在本文中，我们介绍了：

自定义滚动条不再常见。您会在主要网站和博客中找到它们，尤其是个人作品集网站。
有大量的 jQuery 插件可以帮助自定义滚动条。
自定义滚动条暴露在 -webkit 供应商前缀后面。
滚动条的基本结构。
与滚动条相关的术语。

自定义滚动条的 CSS 方式很简单，但看起来有点粗糙。但是，Windows、OS X 和 Linux 等操作系统对滚动条有自己的风格。这反过来可能会导致您的设计出现不良结果和不一致。记住，你应该保持简单、愚蠢（KISS），不要太花哨。

我使用上述过程创建了更多滚动条。我使用 codePen 进行演示，您可以在 CodePen 上找到本教程的完整代码。

就这样。我希望你喜欢它！

确保在下面的评论中留下任何想法、问题或疑虑。我很想看到他们。

致谢

@twholman 密码笔