::--webkit 滚动条设计在 Chrome 版本 121.0.6167.86 中不起作用

Question

之前的滚动条设计工作得很好，但是在最近的 Chrome 更新之后

--webkit-scrollbar

设计就不起作用了。我试图在使用

overflow-x: scroll;

的元素中隐藏滚动条，但默认的 chrome 滚动条仍然可见。

 .carusel-wrapper {
    width: 100%;
    overflow-x: scroll;
    height: fit-content;
    scroll-behavior: smooth;

    &::-webkit-scrollbar { display: none; }
  }

主滚动条设计不起作用也意味着

::-webkit-scrollbar

宽度和

border-radius

的

::-webkit-scrollbar-thumb

* {
  scrollbar-width: thin;
  scrollbar-color: $primary;

  &::-webkit-scrollbar { width: 8px; }

  &::-webkit-scrollbar-track { background: $background; }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: $background;
  }
}

Answer 1

Chrome 121 添加了对

scrollbar-width

和

scrollbar-color

的支持。如果您有

scrollbar-width

将禁用

--webkit-scrollbar

伪元素。另外

scrollbar-width: thin;

将输出一个浅色标准滚动条（只是更细）。 您需要向

scrollbar-color

提供两个值（用于拇指和轨道）。

您可以使用

@supports

来避免遮挡

--webkit-scrollbar

元素。

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color)  var(--scrollbar-track-color);
  }
}