适配深色模式站点：修改pre元素滚动条颜色样式失效如何解决

核心原因 #

scrollbar-color是CSS滚动条规范的标准属性，仅火狐浏览器原生支持，Chrome、Edge、Safari等webkit/blink内核的主流浏览器不识别该属性，需要使用webkit私有伪元素自定义滚动条样式，这是代码不生效的最常见原因。

全浏览器兼容实现代码 #

/* 火狐浏览器适配 */
.syslogs {
  /* 可选：设置滚动条为细样式，更适配代码块场景 */
  scrollbar-width: thin;
  /* 属性值顺序：<滑块颜色> <轨道颜色>，可自行调整色值匹配深色风格 */
  scrollbar-color: #555 #323338;
}

/* Chrome/Edge/Safari 浏览器适配 */
/* 滚动条整体尺寸 */
.syslogs::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/* 滚动条轨道样式 */
.syslogs::-webkit-scrollbar-track {
  background-color: #323338;
  border-radius: 3px;
}
/* 滚动条滑块样式 */
.syslogs::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 3px;
}
/* 可选：滑块悬浮效果 */
.syslogs::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

仍不生效的排查方向 #

• 检查样式优先级：如果存在其他更高权重的样式覆盖了滚动条规则，可在属性后加!important临时测试，确认问题后调整选择器权重即可
• 打开浏览器开发者工具的元素检查面板，选中pre元素查看已应用的样式，确认自定义滚动条样式没有被划掉（被划掉说明被其他规则覆盖）
• 清除浏览器缓存后重新测试，避免旧样式缓存影响

内容的提问来源于stack exchange，提问作者code-8