CSS滚动表和进度表

滚动条本身就是一个天然的进度指示器。滚动条的位置直接反映了滚动元素（通常是整个页面）的滚动进度。但它更像是一个进度指示器，而不是一个“填充式”的进度条。

我们可以运用一些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的一个Pen中。

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

我真的可以使用这个吗？

不能！除了它非常奇怪且是非标准的之外。Safari浏览器会崩溃，而且我不知道该如何修复。

不过，我确实有一个非常相关的CSS技巧。

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

好的，请看这里。

以上是CSS滚动表和进度表的详细内容。更多信息请关注PHP中文网其他相关文章！