自定义网站上的滚动条
大家好，今天我们又见面了，带来一个新的教程。正如标题所示，今天我将教大家如何自定义网站的滚动条。本教程仅适用于部分支持此功能的浏览器：Google Chrome、Microsoft Edge、Opera 和 Safari。Firefox 和 Internet Explorer 不支持自定义滚动条（至少使用这种方法不行）。我们将首先学习如何在大多数浏览器上自定义滚动条，然后再学习如何在 Mozilla Firefox 浏览器上自定义滚动条。不过别担心，Internet Explorer 不支持此功能并不意味着显示效果会很差，用户只是看不到你精心设计的滚动条而已😎。准备好了吗？让我们开始吧！
大多数浏览器都支持自定义滚动条。
基础知识
要自定义浏览器上的滚动条，必须使用伪元素::-webkit-scrollbar，该伪元素允许修改滚动条的样式。
要修改滚动条，大约有 7 种不同的选择器，其中一些属性不如其他属性重要，本教程将重点介绍以下三个属性：
::-webkit-scrollbar它代表整个滚动条。我们可以使用此属性定义滚动条的宽度。::-webkit-scrollbar-thumb这就是滚动条。对于这个伪元素，我们可以应用多种不同的参数来设置样式：渐变、颜色、边框圆角、悬停效果等等。::-webkit-scrollbar-track对于滚动条的轨道（进度条），我们可以应用背景属性。
执行
现在我们已经了解了滚动条样式的主要属性，接下来我们将通过一个例子来实践我们刚才所看到的内容。
我们将从一个简单的HTML基础开始，如下所示：
<body>
<h1>I'm the title</h1>
<!-- Put a lot of text here, so that the page has to be scrolled to be seen in full. -->
<p>[YOUR TEXT]</p>
</body>
让我们给层叠样式表添加一些样式：
body{
background: #252525;
color: white;
margin: 20px 5%;
}
h1{
text-align: center;
}
p{
width: 800px;
max-width: 95%;
text-align: justify;
margin: 0 auto;
}
我们将之前看到的各种属性付诸实践（仍然在我们的 CSS 文件中 😉）：
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(8, 8, 8, 0.58);
transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-track {
background: transparent;
}
您可以在下面看到我们这段代码的运行结果，其中我将“[您的文本]”替换成了 Lorem Ipsum 文本：
完成
为了使页面更简洁，我们可以将 CSS 属性应用overflow: overlay;到我们的页面中body，这样滚动条就可以位于页面内部。
我们还将通过添加border-radius鼠标悬停时的动态效果来改进滚动条。
您可以在下方看到我们 CSS 代码的更改：
body{
overflow: overlay;
background: #252525;
color: white;
margin: 20px 5%;
}
h1{
text-align: center;
}
p{
width: 800px;
max-width: 95%;
text-align: justify;
margin: 0 auto;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(125, 125, 125, 1);
border-radius: 12px;
transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(157, 157, 154, 1);
}
::-webkit-scrollbar-track {
background: transparent;
}
最终结果及后续步骤：
自定义 Mozilla Firefox 的滚动条
对于 Mozilla Firefox 来说，这更简单（其实本来就不复杂😂），因为我们只需要设置以下两个scrollbar-color参数scrollbar-width。
对于第一个参数，scrollbar-color您需要填写两个颜色值：第一个值用于滚动条颜色，第二个值用于滚动条进度区域的背景颜色。
对于第二个参数，我们可以为滚动条的scrollbar-width宽度设置几个值：auto，，，，，，或。inheritinitialnonerevertthinunset
例如，要在 Mozilla 上自定义滚动条，我们可以使用以下代码。
html{
scrollbar-color: #e82727 #959595;
scrollbar-width: thin;
}
希望这篇教程能帮助你创建自定义滚动条，欢迎在评论区留下你的反馈！👍
文章来源：https://dev.to/clementgaudiniere/customize-the-scrollbar-on-a-website-gh1