如何通过 4 个简单的步骤仅使用 CSS 创建自定义滚动条 -

但首先，为什么要创建自定义滚动条？

答案很简单——默认的滚动条很丑，不符合任何网站的主题！此外，自定义滚动为您的网站增添了独特性。

你可以自己看到不同之处！

关于滚动条的几件事

在自定义我们的滚动条之前，我们应该了解一些与滚动条相关的技术术语。别担心，我们大部分时间只关心两件事——滚动条轨道和滚动条拇指

• Scrollbar Track：简单来说就是滚动条的背景
• 滚动条拇指：它是我们单击并拖动以滚动的按钮。它指示当前滚动位置。

让我们开始！

1. 打开你的 index.css 文件

2. 改变你的滚动条的宽度：我觉得默认的滚动条太宽了。因此，如果您想更改滚动条的宽度，请将以下语法添加到您的代码中。我发现 10px 是最佳选择。

::-webkit-scrollbar {
width: 10px; 
}

3. 更改轨道颜色：添加以下代码更改滚动条的轨道颜色。我发现深色版本的白色或浅色版本的原色最适合这种情况。

::-webkit-scrollbar-track {
background-color: whitesmoke;
}

4. 更改拇指的颜色和边框半径：添加以下代码以将滚动条的拇指颜色更改为网站的原色。

::-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;
}