带有进度条的 CSS 滚动条 | CSS-Tricks

滚动条是自然的进度条。滚动条向下或向右移动的距离代表了滚动该元素（通常是整个页面）的进度。但是，如果将进度条视为随着滚动而“填充”的东西，那么它们更像是进度指示器而不是进度条。

我们可以使用一些 CSS 技巧使滚动条随着滚动而填充。

这仅适用于 -webkit- 供应商前缀的滚动条样式属性。换句话说，这些是非标准的。标准化的滚动条样式属性是 scrollbar-width 和 scrollbar-color，它们无法实现这种效果，但在长期来看可能是更安全的选择。尽管如此，供应商前缀版本可能不会消失，因此如果您认为这是一种奇怪的渐进增强形式，那就没问题。

技巧是什么？

本质上，它是在滚动条滑块的顶部（或者对于水平滚动元素，是在侧面）悬挂一个巨大的 box-shadow。

:root {
  --shadow: #43a047;
  --scrollbarBG: #eee;
  --thumbBG: #66bb6a;
}
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 15px 5px black;
}

演示

我第一次在 Myk 的一篇文章中看到这个。

那个例子没有区分滚动条的滑块部分，这使它更像一个进度条，但也更难使用。我的演示有一个略微不同的颜色滑块。

我真能用这个吗？

不能！除了它非常奇怪和非标准之外。 Safari 会翻倒，我不知道如何修复它。

我确实有一个我最喜欢的 CSS 技巧，它与这个非常相关。

我想了解更多有关滚动条样式的信息

好，给你.

Christopher Kirk-Nielsen

# 2020 年 4 月 15 日

尝试使用 filter 但该属性在滚动条上似乎无效。使用 box-shadow 的链似乎非常有效，但在内容非常高的情况下非常脆弱（使用 Sass 循环为从 1 到 100 的每个 vh 单元添加阴影有点过分，可能）：CodePen 演示（顺便说一句，它在 Safari 上仍然不起作用，只是稍微好了一点，我想？）。

Kapetan

# 2020 年 4 月 20 日

酷，这个更简单

:root {
  --shadow: #43a047;
  --scrollbarBG: #eee;
}
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
  border-bottom: 100vh solid var(--shadow);

a.bondarenko

# 2020 年 4 月 23 日

看起来它在最新的 Firefox（FF 75.0）中不起作用

技巧是什么？

演示

我真能用这个吗？

我想了解更多有关滚动条样式的信息

评论