如何用纯 CSS 为您的网站创建漂亮的自定义滚动条

2025-06-08

如何用纯 CSS 为您的网站创建漂亮的自定义滚动条

网络上的自定义滚动条可以使网站或设计脱颖而出。它们有助于展现网站的关键设计元素，无论是特定的颜色还是特定的风格。

例如，Outlook.com Web 应用程序的滚动条呈现出非常简约的风格。CSS -Tricks的滚动条则展示了其标志性的橙色和粉色外观。

默认滚动条与自定义滚动条示例

在这篇文章中，我们将构建一个简约的自定义滚动条，类似于 Outlook.com Web 应用程序上的滚动条。

如果您想查看最终结果，请查看Codepen。

1.设置 HTML 和 CSS

我们将从一个包含一些占位符文本的基本容器元素开始，这些文本是要滚动的元素。我为此编写的设计非常简约，使用了蓝灰色调。



<div class="container custom-scrollbar">
  <h1>Try Scrolling!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit consequatur quae?</p>
  <!-- more placeholder text here (omitted for brevity) --> 
</div>
Enter fullscreen mode Exit fullscreen mode 


* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: #ecf0f1;
  padding: 1.5rem;
  margin: 0;
}
.container {
  background-color: #fdfdfd;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 4px 28px rgba(123,151,158,.25);
  border: 1px solid #d6dee1;
  padding: 1rem;
  overflow: scroll;
}
Enter fullscreen mode Exit fullscreen mode

这看起来像这样：

步骤 1 结果

2. 创建滚动条容器和轨道

让我们从滚动条容器开始。滚动条容器包含整个滚动条，包括滚动轨道（覆盖整个高度）和可拖动的滚动条滑块。

它通过 webkit 伪选择器 进行选择::-webkit-scrollbar，该选择器本身会选择网站上的所有滚动条。在选择器中添加元素作为前缀，可以使其仅选择该特定元素中的滚动条；例如：.container::-webkit-scrollbar。这与我们即将使用的所有其他滚动条属性相同。

滚动条容器主要用于自定义整个滚动条的宽度，像这样：



::-webkit-scrollbar {
  width: 20px;
}
Enter fullscreen mode Exit fullscreen mode

接下来，让我们自定义轨道，使用::webkit-scrollbar-track选择器。

注意：滚动条选择器功能有限，并且无法正确支持多个 CSS 属性，例如padding、margin、transition等等。我稍后会解释其中一个属性的关键解决方法。

轨道横跨滚动元素的整个高度。为其添加样式通常意味着更改其背景颜色。为了保持极简主义的设计风格，我们暂时选择保持轨道透明，只显示滚动条滑块（用户点击并拖动的滚动条部分）。



::-webkit-scrollbar-track {
  background-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

3.创建滚动条缩略图

现在来看看最重要的部分：滚动条滑块。正如我提到的，滚动条滑块是滚动条的主要部分，用户可以点击并拖动它。它由::-webkit-scrollbar-thumb选择器选择。

为了开始设计这个样式，我将添加一个浅灰色的背景以适应正在使用的一般调色板：



::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
}
Enter fullscreen mode Exit fullscreen mode

接下来，让我们使用属性添加圆角border-radius，就像添加其他元素一样。



::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
}
Enter fullscreen mode Exit fullscreen mode

向拇指添加填充比较棘手，因为滚动条选择器实际上并不支持填充属性。

这里的解决方法是在填充位置添加透明边框，并使用该background-clip: content-box语句确保元素在其宽度和高度内包含边框。



::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
Enter fullscreen mode Exit fullscreen mode

这是滚动条现在的样子，几乎完成了：

第 2 步结果

符合设计，对吗？

4.添加悬停效果

最后，让我们为滚动条滑块添加悬停效果。遗憾的是，transition大多数浏览器不支持该属性，所以这里没有选项。

因此，我们只需让滚动条拇指在鼠标悬停时稍微变暗一点，而不进行任何过渡。




::-webkit-scrollbar-thumb:hover {

  background-color: #a8bbbf;

}
Enter fullscreen mode Exit fullscreen mode




滚动条已完成！

这是最终的 Codepen：

截至撰写本文时，所有主流浏览器（包括 IE11）均支持自定义滚动条。有关浏览器对自定义滚动条支持的更多信息，请参阅“我可以使用吗”页面。

我希望您喜欢这篇文章并发现它对于创建自定义滚动条很有用。

感谢您的浏览。

— 加布里埃尔·罗穆阿尔多

鏂囩珷鏉簮锛�https://dev.to/gaberomualdo/how-to-create-a-beautiful-custom-scrollbar-for-your-site-in-plain-css-1mjg
Devto 翻译
PREV
我创建了每日开发者笑话和第一个 DEV Bot
NEXT
快速简便的 JS 视差效果