解决滚动条引起的页面偏移

1. 最佳方案：使用 scrollbar-gutter（最推荐）

这是目前最优雅的解决方案。它告诉浏览器提前为滚动条预留出空间，即使滚动条当前不可见。
在手机端，scrollbar-gutter: stable会被智能忽略，因为它知道移动端滚动条是不占位的。这样既解决了电脑端的偏移，又保证了手机端的纯净。

html {
  /* 仅在需要时显示滚动条，但始终保留滚动条占位，防止抖动 */
  scrollbar-gutter: stable; 
}

优点： 不会强迫滚动条一直显示，但布局永远保持稳定。
缺点： 在非常老旧的浏览器（如 IE 或旧版 Edge）上不生效，但不会破坏布局。

2. 简单粗暴法：强制显示滚动条

如果你的网站大多数页面都很长，强制让短页面也显示滚动条轨道是最直接的办法。

html {
  overflow-y: scroll;
}

优点： 兼容性极强，完全解决偏移问题。
缺点： 在内容很少的页面上，右侧也会出现一个灰色的空滚动条轨道，视觉上可能不够完美。

3. 动态计算法：利用 vw 和 100% 的差值

你可以通过 CSS 函数计算出滚动条的宽度，并将其补偿给页面的padding或margin。

html {
  /* 这里的 100vw 是窗口宽度，100% 是内容宽度，两者之差就是滚动条宽度 */
  padding-left: calc(100vw - 100%);
}

优点： 不需要强制显示滚动条。
原理： 当没有滚动条时，100vw等于100%，padding为0；当有滚动条时padding会自动撑开对应的大小。

4. 针对移动端和现代 UI 的方案：自定义滚动条

你可以通过 CSS 隐藏滚动条背景或者将其设置为绝对定位（类似于 iOS 的覆盖型滚动条），这样它就不会占用布局空间。

/* Webkit 引擎浏览器 (Chrome, Safari, Edge) */
html::-webkit-scrollbar {
  width: 8px;
}
html {
  overflow-y: overlay; /* 这是一个非标准属性，但效果很好：滚动条悬浮在内容之上 */
}

注意：overflow: overlay虽然好用，但已在 CSS 标准中被废弃，建议优先使用方案1。