但首先，为什么要创建自定义滚动条？
答案很简单——默认的滚动条很丑，不符合任何网站的主题！此外，自定义滚动为您的网站增添了独特性。
你可以自己看到不同之处！
关于滚动条的几件事
在自定义我们的滚动条之前，我们应该了解一些与滚动条相关的技术术语。别担心，我们大部分时间只关心两件事——滚动条轨道和滚动条拇指
- Scrollbar Track：简单来说就是滚动条的背景
- 滚动条拇指：它是我们单击并拖动以滚动的按钮。它指示当前滚动位置。
让我们开始！
打开你的 index.css 文件
改变你的滚动条的宽度：我觉得默认的滚动条太宽了。因此，如果您想更改滚动条的宽度，请将以下语法添加到您的代码中。我发现 10px 是最佳选择。
::-webkit-scrollbar {
width: 10px;
}
- 更改轨道颜色：添加以下代码更改滚动条的轨道颜色。我发现深色版本的白色或浅色版本的原色最适合这种情况。
::-webkit-scrollbar-track {
background-color: whitesmoke;
}
- 更改拇指的颜色和边框半径：添加以下代码以将滚动条的拇指颜色更改为网站的原色。
::-webkit-scrollbar-thumb {
background-color: lightgreen;
border-radius: 0.5rem;
}
你完成了！
或者，您可以在此 Codepen 中使用 CSS，只需复制代码即可获得您自己的自定义滚动条！
html
<div class="main">
<h1>Create your custom scrollbar in 4 easy steps!</h1>
</div>
css
.main{
display: flex;
justify-content: center;
align-items: flex-start;
height: 600px;
font-family: sans-serif;
}
/* Change the settings below according to preference and copy the code */
/* Change the width of the entire scrollbar here */
::-webkit-scrollbar {
width: 10px;
}
/* Change the scrollbar background color here */
::-webkit-scrollbar-track{
background-color: whitesmoke;
}
/* Change the scrollbar button color and roundedness here */
::-webkit-scrollbar-thumb{
background-color: lightgreen;
border-radius: 0.5rem;
}
