Chrome更新后Scrollbar样式失效，如何实现跨浏览器滚动条样式？

Chrome更新后原webkit滚动条样式失效，大概率是新版本对选择器解析逻辑做了调整。以下是适配Chrome、Firefox、Edge、Safari的兼容方案，沿用你原来的CSS-in-JS结构调整：

// 兼容多浏览器的共享滚动条样式
const scrollbarSharedStyle = {
  // Firefox 标准属性
  scrollbarWidth: 'thin', // 可选值：auto / thin / none
  scrollbarColor: `${themeLayers.scrollBar[0]} ${themeLayers.scrollBar[1]}`, // 格式：[滚动滑块颜色] [滚动轨道颜色]
  
  // WebKit内核浏览器（Chrome/Edge/Safari）
  '&::-webkit-scrollbar': {
    backgroundColor: `${themeLayers.scrollBar[1]}`,
    width: 12,
    height: 12, // 同时适配横向滚动条高度
  },
  '& *::-webkit-scrollbar': {
    backgroundColor: `${themeLayers.scrollBar[1]}`,
    width: 12,
    height: 12,
  },
  '&::-webkit-scrollbar-thumb': {
    borderRadius: 6,
    backgroundColor: `${themeLayers.scrollBar[0]}`,
    minHeight: 24,
    // 用透明边框模拟轨道与滑块的间距，配合backgroundClip确保背景只填充滑块内容区
    border: '2.5px solid transparent',
    backgroundClip: 'content-box',
  },
  '& *::-webkit-scrollbar-thumb': {
    borderRadius: 6,
    backgroundColor: `${themeLayers.scrollBar[0]}`,
    minHeight: 24,
    border: '2.5px solid transparent',
    backgroundClip: 'content-box',
  },
  // 滚动条交互状态
  '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
    backgroundColor: `${themeLayers.scrollBar[0]}`, // 可按需修改hover状态颜色
  },
  '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
    backgroundColor: `${themeLayers.scrollBar[0]}`, // 可按需修改active状态颜色
  },
  '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
    backgroundColor: `${themeLayers.scrollBar[1]}`,
  },
};

关键调整说明 #

• Firefox适配：使用CSS标准属性scrollbar-width和scrollbar-color，虽无法自定义圆角，但能保证基础样式统一
• WebKit选择器修复：拆分原合并的选择器，改用backgroundClip: content-box替代直接设置轨道颜色的边框写法，规避Chrome新版本解析异常
• 横向滚动条兼容：新增height属性，确保横向、纵向滚动条样式一致

注意事项 #

• Firefox目前不支持自定义滚动条圆角、精细宽度，仅能通过scrollbar-width选择预设尺寸
• 若不需要子元素继承滚动条样式，可移除& *::-webkit-scrollbar相关选择器
• 确保样式优先级足够，避免被其他全局样式覆盖

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