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 和 <color><color> ,它们的描述如下。

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

scrollbar-color: #111 #333;

height: 200vh;

}

如果你碰巧在Windows或Linux上使用64版FireFox,这对你来说是可行的,如果不是,这里有一个截图。

14mfewuv88ltyqccvdvi

目前,自定义颜色可以工作,但 autodark 和 light 都让滚动条成为默认状态。

scrollbar-width

现在我们来看看 scrollbar-width。

scrollbar-width 属性允许作者设置一个元素的滚动条在显示时的最大宽度。

这次我们只有3个可能的输入值 auto , thin 和 none 。它们是这样描述的

auto 该平台的默认滚动条宽度。

thin 在提供该选项的平台上,一个薄的滚动条宽度变量,或者一个比默认平台滚动条宽度更薄的滚动条。

none 无显示滚动条,但该元素仍可滚动。

:root {

scrollbar-width: thin;

height: 200vh;

}

同样,FireFox是必需的,所以这里是它的样子。

exk8iwgeqq438v48ly0j

Both together

:root {
scrollbar-color: #111 #333;
scrollbar-width: thin;
height: 200vh;
}

cv34ejlxi1grbxriys12

小结

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