不同设备滚动条类型差异及布局对齐问题排查

这种情况我之前踩过好几次坑，明明软硬件配置几乎一模一样，结果滚动条的行为差这么多，其实问题出在Chrome的滚动条渲染逻辑和系统级的显示偏好上，跟浏览器版本和系统的细微设置差异有关，具体原因和解决方法我整理一下：

为什么会出现差异？ #

• Chrome实验性设置差异：Chrome有个内置的实验性功能 Overlay Scrollbars（覆盖式滚动条），如果一台设备开启了这个flag，另一台没开，就会出现明显区别——开启后滚动条是悬浮式的，只有滚动时才出现，不会抢占布局空间；关闭的话就是传统的常驻滚动条，会固定占据一定宽度挤压内容。哪怕是同版本Chrome，用户可能不小心修改过这个设置，或者设备的默认配置不同。
• 系统级显示设置影响：不管是Windows还是macOS，系统本身都有滚动条的显示偏好设置。比如Windows在「设置-系统-显示-高级显示设置」里有“滑动时显示滚动条”的选项；macOS在「系统设置-通用-滚动条」里可以选择“总是显示”“仅在滚动时显示”或者“自动”。Chrome会优先遵循系统的这个设置，哪怕浏览器版本一致，系统设置不同也会导致滚动条行为不同。
• 显示缩放比例的细微影响：如果两台设备的屏幕显示缩放比例不一样（比如一台100%，一台125%），在高DPI屏幕上Chrome的滚动条渲染逻辑可能会触发不同的模式，进而出现布局差异。

怎么解决布局偏移问题？ #

最稳妥的方式是通过CSS强制统一滚动条的样式和行为，不受系统和浏览器设置影响：

方法1：自定义固定宽度的滚动条

用WebKit的滚动条伪元素自定义样式，给滚动条设置固定宽度，这样不管是常驻还是动态显示，都会占据固定空间，内容布局不会偏移：

/* 全局自定义滚动条（也可以给指定容器单独设置） */
::-webkit-scrollbar {
  width: 8px; /* 设置固定宽度，避免挤压内容 */
  height: 8px;
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

方法2：使用悬浮式滚动条（不占布局空间）

如果不想让滚动条占据布局空间，可以用overflow: overlay代替overflow: auto，这样滚动条会悬浮在内容上方，不会挤压内容。注意这个属性是WebKit专属的，适合只针对Chrome等WebKit内核浏览器的场景：

/* 给需要滚动的容器设置 */
.scroll-content {
  overflow: overlay;
}

验证差异原因的小技巧 #

你可以在两台设备上分别打开Chrome的chrome://flags/#overlay-scrollbars，查看这个flag的状态是否一致；同时检查系统的滚动条显示设置，就能找到差异的根源了。

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