跳到主要内容

滚动条出现导致页面内容抖动

问题现象​

当页面内容从不需要滚动切换为需要滚动时，传统滚动条会占用横向空间，使内容区域宽度发生变化，从而出现页面抖动或布局偏移。这个问题在 Windows 等默认使用占位式滚动条的平台上更明显。

推荐方案：OverlayScrollbars​

使用 OverlayScrollbars 将滚动条覆盖在内容上方，避免滚动条出现或消失时改变内容区域宽度。

安装​

npm install overlayscrollbars

基础用法​

import 'overlayscrollbars/overlayscrollbars.css';
import { OverlayScrollbars } from 'overlayscrollbars';

const instance = OverlayScrollbars(document.body, {
  scrollbars: {
    autoHide: 'scroll',
  },
});

// 不再使用时销毁实例
instance.destroy();

优点​

  • 滚动条覆盖在内容上，不占用布局宽度，因此不会引起内容抖动。
  • Windows、macOS 等平台上的滚动体验和外观更一致。
  • 支持自定义样式，并提供 React、Vue 等框架集成。

注意事项​

  • 需要额外的依赖和 JavaScript 初始化。
  • 客户端渲染框架中应在组件挂载后初始化，并在卸载时销毁实例。
  • 如果只需要解决页面抖动，而不需要统一滚动条样式，引入该库的成本会高于纯 CSS 方案。

备选方案：scrollbar-gutter​

html {
  scrollbar-gutter: stable;
}

scrollbar-gutter: stable 会为滚动条预留稳定空间，使滚动条出现或消失时内容宽度保持不变。它不需要 JavaScript，但在较旧浏览器及部分旧版 Safari 中兼容性不足，使用前需要结合项目的浏览器支持范围进行确认。

必要时可使用兼容性更好的兜底方案：

html {
  overflow-y: scroll;
}

这种写法会始终保留纵向滚动条空间，但短页面上也可能显示滚动条轨道。

结论​

项目需要统一滚动条样式和跨平台体验时，优先使用 OverlayScrollbars；scrollbar-gutter: stable 作为轻量的纯 CSS 备选方案记录，但需注意旧浏览器兼容性。