Chrome 121.0.6167.86版本自定义::-webkit-scrollbar滚动条失效求助

Chrome 121版本对滚动条的默认样式处理逻辑有调整，原有的-webkit前缀样式可能被新的默认样式覆盖，你可以通过以下修改来恢复自定义效果：

修改后的CSS代码 #

/* 标准滚动条属性，兼容现代浏览器 */
scrollbar-width: thin;
scrollbar-color: rgba(68, 102, 242, 0.15) transparent;

body.dark-only {
  scrollbar-color: rgba(41, 50, 64, 0.52) transparent;
}

/* WebKit 前缀样式，适配Chrome/Edge */
::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  background-color: transparent; /* 明确轨道背景，避免默认样式干扰 */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(68, 102, 242, 0.15);
  border-radius: 3px; /* 可选，让滑块和宽度更匹配 */
}

body.dark-only::-webkit-scrollbar-thumb {
  background-color: rgba(41, 50, 64, 0.52);
}

关键修改说明 #

• 补充了标准CSS滚动条属性scrollbar-width和scrollbar-color，既提升了跨浏览器兼容性，也能让Chrome更准确识别自定义滚动条配置
• 给::-webkit-scrollbar添加background-color: transparent，明确滚动条轨道的透明背景，避免Chrome 121的默认轨道样式覆盖滑块的自定义颜色
• 如果页面中存在其他优先级更高的CSS规则，可以尝试给选择器增加特异性（比如html::-webkit-scrollbar-thumb），必要时临时使用!important强制生效（不推荐长期使用）

内容的提问来源于stack exchange，提问作者Dat Tran