Chrome 121.0.6167.86版本中::-webkit-scrollbar样式失效求助

一、修复.carusel-wrapper滚动条无法隐藏的问题 #

Chrome 121对横向滚动条的隐藏逻辑做了调整，仅设置::-webkit-scrollbar { display: none; }可能不生效，可采用以下两种修复方式：

方案1：补充全组件隐藏+Firefox兼容样式 #

修改.carusel-wrapper的样式，覆盖所有滚动条相关元素：

.carusel-wrapper {
  width: 100%;
  overflow-x: scroll;
  height: fit-content;
  scroll-behavior: smooth;
  /* 兼容Firefox */
  scrollbar-width: none;
  /* Chrome/Safari 需隐藏所有滚动条组件 */
  &::-webkit-scrollbar {
    display: none;
  }
  &::-webkit-scrollbar-track {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    display: none;
  }
}

方案2：兼容更多旧浏览器 #

如果需要适配IE/Edge旧版、Firefox旧版，可补充专属属性：

.carusel-wrapper {
  /* ...原有样式... */
  scrollbar-width: none;
  -ms-overflow-style: none; /* IE/Edge 专属 */
  overflow: -moz-scrollbars-none; /* Firefox 旧版专属 */
  
  &::-webkit-scrollbar {
    display: none;
  }
}

二、修复全局滚动条样式不生效的问题 #

全局*选择器优先级可能被Chrome默认样式覆盖，且Chrome 121对滚动条伪元素的样式绑定要求更明确，可按以下方式调整：

1. 优化选择器范围 #

替换全局*选择器为根元素+通用滚动容器，减少冲突：

html, body, .scroll-container {
  scrollbar-width: thin;
  scrollbar-color: $primary $background; /* 顺序：滑块颜色 轨道颜色 */
  
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* 补充横向滚动条高度 */
  }
  
  &::-webkit-scrollbar-track {
    background: $background;
  }
  
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: $primary;
    /* 可选：加内边距避免滑块贴边 */
    border: 2px solid $background;
  }
}

2. 应急：强制提升样式优先级 #

如果上述方案仍不生效，可临时给伪元素样式加!important（不推荐长期使用）：

*::-webkit-scrollbar {
  width: 8px !important;
}

*::-webkit-scrollbar-thumb {
  border-radius: 4px !important;
  background-color: $primary !important;
}

三、额外排查项 #

• 检查Chrome实验特性：在地址栏输入chrome://flags/#custom-scrollbar，若设置为Enabled，会导致自定义样式失效，改回Default后重启浏览器。
• 确认SCSS变量$primary、$background已正确定义，无编译错误。

内容的提问来源于stack exchange，提问作者NEYAZ NAFIZ