为何同用最新MacOS/Chrome，overflow-y: scroll滚动条显示不一致？

现象对比 #

• 我看到的效果：
  
• 另一位用户看到的效果：
  
• 我的滚动条仅在主动滚动时显示：
  

两位用户均使用最新版本的MacOS和Chrome浏览器，为何会出现白色滚动条始终显示的差异？如何让视觉效果保持一致？

代码示例 #

<div style="align-items: center; display: flex; height: 100vh; justify-content: center; overflow: auto;">
  <div style="height: 400px; overflow-y: scroll; width: 400px;">
    <div style="background: red; height: 800px; width: 400px;" />
  </div>
</div>

原因分析 #

MacOS Chrome中滚动条显示差异的核心是系统滚动条设置不同：

• 你的设备开启了「仅在滚动时显示滚动条」（系统设置 > 通用 > 滚动条）
• 另一位用户的设备设置为「始终显示滚动条」，Chrome会直接沿用系统级的滚动条样式，因此出现常驻的白色滚动条

统一效果的解决方案 #

要忽略系统设置，强制实现跨设备的滚动条视觉一致性，可以通过CSS的::-webkit-scrollbar系列伪元素自定义滚动条样式：

方案1：模拟「仅滚动/ hover时显示」的默认效果 #

/* 默认隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
  width: 0;
}

/* 鼠标hover或滚动时显示滚动条 */
.scroll-container:hover::-webkit-scrollbar,
.scroll-container::-webkit-scrollbar:horizontal {
  width: 8px;
}

/* 自定义滚动条滑块样式 */
.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* 自定义滚动条轨道样式 */
.scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}

给目标容器添加类名后使用：

<div style="align-items: center; display: flex; height: 100vh; justify-content: center; overflow: auto;">
  <div class="scroll-container" style="height: 400px; overflow-y: scroll; width: 400px;">
    <div style="background: red; height: 800px; width: 400px;" />
  </div>
</div>

方案2：强制显示统一样式的常驻滚动条 #

如果需要让所有用户都看到固定样式的常驻滚动条，可使用以下代码：

.scroll-container::-webkit-scrollbar {
  width: 8px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

说明 #

通过::-webkit-scrollbar系列伪元素，能完全接管Chrome的滚动条渲染逻辑，不受系统设置影响，从而实现跨设备的滚动条视觉一致性。

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