Safari浏览器下深色背景页可滚动div滚动条颜色异常问题求解

AI 小北

2026-9-26

可行解决方案

方案1：使用`color-scheme`属性（优先推荐，全iOS版本兼容）

这是兼容性最好、实现成本最低的方案，符合苹果官方的深色模式适配规范，仅需告知浏览器当前区域使用深色配色，系统会自动将滚动条适配为浅色样式，完全兼容所有支持深色模式的iOS版本，无需自定义滚动条样式。
你可以根据需求选择全局生效或仅滚动容器生效：

全局适配深色模式（所有滚动条自动变浅色）

:root {
  color-scheme: dark;
}

仅指定滚动容器适配（不影响页面其他区域的配色规则）

div.scrollable {
  color-scheme: dark;
  /* 保留你原有其他样式 */
  width: 200px;
  height: 120vh;
  background: #222;
  overflow-y: scroll;
}

方案2：WebKit内核自定义滚动条样式（适配桌面Safari + iOS 15+）

如果你需要更精细地控制滚动条的宽度、颜色、圆角等样式，可以使用WebKit私有伪元素实现，该方案支持iOS 15及以上系统、桌面端Safari浏览器：

/* 滚动条整体宽度 */
div.scrollable::-webkit-scrollbar {
  width: 8px;
}
/* 滚动条轨道背景 */
div.scrollable::-webkit-scrollbar-track {
  background: #333;
  border-radius: 4px;
}
/* 滚动条滑块样式 */
div.scrollable::-webkit-scrollbar-thumb {
  background: #eee;
  border-radius: 4px;
}
/* 桌面端滑块hover效果 */
div.scrollable::-webkit-scrollbar-thumb:hover {
  background: #fff;
}