【現代 CSS】標準捲軸控制規範 scrollbar-color 和 scrollbar-width

ChokCoco發表於2024-06-12
CSS

Chrome 在 121 版本開始，原生支援了兩個捲軸樣式相關的樣式 scrollbar-color 和 scrollbar-width。

要知道，在此前，雖然有 ::-webkit-scrollbar 規範可以控制捲軸，可是，::-webkit-scrollbar 是非標準特性，在 MDN 文件中都明確了不應該在生產環境使用它。

MDN - ::-webkit-scrollbar
Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

而 scrollbar-color 和 scrollbar-width 是官方標準，在 CSS Scrollbars Styling Module Level 1 規範中被提出。

本文，我們就將一起學習看看這兩個屬性的使用。

scrollbar-color 設定捲軸顏色

顧名思義，scrollbar-color 就是用於設定捲軸顏色的。

不過有意思的是，一個完整的捲軸，其實是有多個小元件組成的，所以能設定的顏色其實也有很多。

以非標準規範 ::-webkit-scrollbar 為例，它將捲軸拆分成了這麼多個部分：

當然，新規範沒有這麼複雜，我們簡化上述的圖，可以得到這麼一張圖：

而 scrollbar-color 能夠設定的，正是上圖中的 track 和 thumb 的顏色：

  • 軌道（track）是指捲軸，其一般是固定的而不管滾動位置的背景。
  • 滑塊（thumb）是指捲軸通常漂浮在軌道的頂部上的移動部分。

簡單舉個例子:

<div class="scroll-box">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quaerat ipsam fugit fugiat cupiditate asperiores neque libero natus atque, suscipit error esse inventore numquam molestiae quas laborum eius debitis cum?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quaerat ipsam fugit fugiat cupiditate asperiores neque libero natus atque, suscipit error esse inventore numquam molestiae quas laborum eius debitis cum?
    ...
  </p>
</div>

.scroll-box {
    border: 1px solid #666;
    overflow: scroll;    
}

正常而言，當 <p> 標籤內的內容足夠多，溢位到開始滾動，則捲軸樣式為：

此時，我們可以透過 scrollbar-color 設定捲軸的軌道顏色和滑塊顏色：

.scroll-box {
    border: 1px solid #666;
    overflow: scroll;    
    scrollbar-color: #fff #000;
    // OR
    scrollbar-color: #000 #fff;
}

則，樣式表現如下：

看圖就非常好理解了，簡單而言 scrollbar-color: #000 #fff，需要設定兩個顏色，將第一種顏色應用於捲軸滑塊，第二種顏色應用於捲軸軌道。

當然，上圖是在 Windows 作業系統下的樣式表現，我再補充一張在 macOS/iOS 作業系統下的樣式表現效果：

由於 macOS/iOS 作業系統預設情況下，即便容器內是可滾動的，也不會顯示捲軸，上述效果都是在 Hover 狀態或者滾動狀態下的效果。

並且，值得注意的是，大家可以發現，macOS/iOS 作業系統下捲軸軌道是透明的，無法被設定顏色，只能設定捲軸滑塊的顏色。

完整的 DEMO，你可以戳這裡：CodePen Demo -- Scrollbar-color Demo

當然，值得注意的是。很多人看中文版的 MDN 文件（2024-04-06），會看到除了直接設定兩個顏色值，以及上面的 auto 關鍵字，規範還提供了 light 和 dark 關鍵字：

{
  /* Keyword values */
  scrollbar-color: auto;
  scrollbar-color: dark;
  scrollbar-color: light;
}

在我實測過後，發現實際沒有任何瀏覽器（使用者代理）目前支援 light 和 dark 關鍵字。

中文文件存在一定的滯後性，還是推薦大家直接看英文文件：

scrollbar-width設定捲軸粗細

瞭解完 scrollbar-color 後，我們再來看看 scrollbar-width。這個從名字也很好理解，設定捲軸的寬度。

那是否和我們想象的一樣，可以任意設定捲軸的寬度，甚至乎，可以定製化的設定滑塊和軌道的寬度？

遺憾的是，在 CSS Scrollbars Styling Module Level 1 一期捲軸規範中，這個屬性的功能被設定的非常弱。

不要說分別設定滑塊和軌道的寬度，scrollbar-width 目前甚至不支援接受一個寬度數值。

什麼意思呢？也就是，當前 scrollbar-width 只接收 3 個關鍵字：

{
  /* Keyword values */
  scrollbar-width: auto;
  scrollbar-width: thin;
  scrollbar-width: none;
}
  • scrollbar-width: auto：系統預設的捲軸寬度。
  • scrollbar-width: thin：系統提供的瘦捲軸寬度，或者比預設捲軸寬度更窄的寬度
  • scrollbar-width: none：不顯示捲軸，但是該元素依然可以滾動

簡單示意圖如下：

完整的 DEMO，你可以戳這裡：CodePen Demo -- Scrollbar-width Demo

總結一下

可以看到，其實就目前 scrollbar-width 而言，其能力還是屬於比較雞肋的。相對正常的樣式，僅僅多了一種瘦版樣式選擇以及提供了無捲軸模式。

當然，整個 scrollbar-color 和 scrollbar-width 相較於非標準的 ::-webkit-scrollbar 規範已經是非常大的一步跨越。只是其功能的豐富性和全面性還需要等待。

最後

好了，本文到此結束，希望對你有幫助 😃

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

參考連結

  • MDN - scrollbar-width
  • CSS Scrollbars Styling Module Level 1
  • CSS-Tricks scrollbar-color

相關文章