在我開始之前，我想說這真的不是為了任何專案，這是第一個公開的工作草案，對瀏覽器的支援接近0%。你可能會問我為什麼要把它變成一篇博文，那是因為越多的人對它感興趣，我們就可能越早在瀏覽器中看到它。
作為第一份公共工作草案發表，並不意味著得到了W3C成員的認可。這是一份草案檔案，可能會在任何時候被其他檔案更新、取代或淘汰。將本檔案作為正在進行的工作以外的其他檔案來引用是不合適的。
有2個新的CSS屬性提出了 scrollbar-color 和 scrollbar-width 。這兩個屬性都在2018年9月釋出的CSS Scrollbars Module Level 1文件中，但當然，我們會去Mozilla的開發網站上獲得更好的理解。
scrollbar-color
讓我們先去看看 scrollbar-color 頁面，看看Mozilla是怎麼說的。
scrollbar-color的CSS屬性設定了滾動條軌道和拇指的顏色。- track指的是滾動條的背景，無論滾動的位置如何，它通常都是固定的。
- thumb是指滾動條的移動部分，它通常漂浮在軌道之上。
scrollbar-color 接受4個輸入，分別是 auto 、 dark 、 light 和 <color><color> ，它們的描述如下。
auto為滾動條的軌跡部分提供預設的平臺渲染，在沒有任何其他相關的滾動條顏色屬性的情況下。dark顯示一個深色的滾動條，它可以是平臺提供的一個深色的滾動條變體，也可以是一個帶有深色的自定義滾動條。light顯示一個淺色的滾動條，可以是平臺提供的淺色滾動條的變體，也可以是一個淺色的自定義滾動條。<color> <color>將第一種顏色應用於滾動條移動部分，第二種顏色應用於滾動條固定背景。
:root {
scrollbar-color: #111 #333;
height: 200vh;
}
如果你碰巧在Windows或Linux上使用64版FireFox，這對你來說是可行的，如果不是，這裡有一個截圖。
目前，自定義顏色可以工作，但 auto, dark 和 light 都讓滾動條成為預設狀態。
scrollbar-width
現在我們來看看 scrollbar-width。
scrollbar-width 屬性允許作者設定一個元素的滾動條在顯示時的最大寬度。
這次我們只有3個可能的輸入值 auto , thin 和 none 。它們是這樣描述的
auto 該平臺的預設滾動條寬度。
thin 在提供該選項的平臺上，一個薄的滾動條寬度變數，或者一個比預設平臺滾動條寬度更薄的滾動條。
none 無顯示滾動條，但該元素仍可滾動。
:root {
scrollbar-width: thin;
height: 200vh;
}
同樣，FireFox是必需的，所以這裡是它的樣子。
Both together
:root {
scrollbar-color: #111 #333;
scrollbar-width: thin;
height: 200vh;
}
小結
我重申，這還沒有準備好用於生產，但看到我們這個小平臺的發展方向是很有趣的。如果你喜歡這種形式，請讓我知道，如果你對我下一步的內容有任何想法，我很樂意聽到它們。
評論留言