CSS的发展：关于滚动条样式的探讨

在我开始之前，我想说这真的不是为了任何项目，这是第一个公开的工作草案，对浏览器的支持接近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 和  ，它们的描述如下。

• auto 为滚动条的轨迹部分提供默认的平台渲染，在没有任何其他相关的滚动条颜色属性的情况下。
• dark 显示一个深色的滚动条，它可以是平台提供的一个深色的滚动条变体，也可以是一个带有深色的自定义滚动条。
• light 显示一个浅色的滚动条，可以是平台提供的浅色滚动条的变体，也可以是一个浅色的自定义滚动条。
•  将第一种颜色应用于滚动条移动部分，第二种颜色应用于滚动条固定背景。

: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;
}

小结

我重申，这还没有准备好用于生产，但看到我们这个小平台的发展方向是很有趣的。如果你喜欢这种形式，请让我知道，如果你对我下一步的内容有任何想法，我很乐意听到它们。