Chrome 在 121 版本開始，原生支持了兩個滾動條樣式相關的樣式 scrollbar-color 和 scrollbar-width。 要知道，在此前，雖然有 ::-webkit-scrollbar 規範可以控制滾動條，可是，::-webkit-scrollbar 是非標準特性，在 MDN 文 ...
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 規範已經是非常大的一步跨越。只是其功能的豐富性和全面性還需要等待。
最後
好了，本文到此結束，希望對你有幫助
