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中文網其他相關文章！