前言

很久没有更新博客了，最近在用新版edge浏览器访问我的网站时发现原来修改的滚动条样式和隐藏滚动条css全部失效。

隐藏滚动条css失效

排错过程

  1. 自然还是先问咱们万能的群友

  2. 询问+查阅资料后发现：

从 Chrome 121 开始，滚动条css样式从::-webkit-scrollbar伪元素，改为了scrollbar-width和scrollbar-color属性。

chrome for developers

正文

scrollbar-color和scrollbar-width属性

  1. 通过 scrollbar-color 为滚动条设置颜色

借助scrollbar-color属性，您可以更改滚动条的配色方案。该属性接受两个<color>值。第一个<color>值用于确定滑块的颜色，第二个值用于确定要用于轨道的颜色。

1
2
3
.scroller {
  scrollbar-color: 滑块颜色 轨道颜色;
}
  1. 使用 scrollbar-width 更改滚动条的大小

借助 scrollbar-width 属性，您可以选择较窄的滚动条，甚至可以完全隐藏滚动条而不影响可滚动性。

接受的值包括 auto、thin 和 none。

  • auto：平台提供的默认滚动条宽度。
  • thin：平台提供的滚动条的细变体，或比默认平台滚动条更细的自定义滚动条。
  • none：不显示滚动条，不过元素仍然可滚动。
  1. 该如何支持旧版浏览器？

兼容性是不可忽视的，为了满足不支持 scrollbar-color 和 scrollbar-width 的浏览器版本，可以同时使用新的 scrollbar-* 和 ::-webkit-scrollbar-* 属性。