需为body标签设置overflow: hidden;但保留滚动条不消失的方案

如果你不想用自定义滚动条样式，这里有两个靠谱的解决思路：

1. 用overflow: clip替代overflow:hidden #

overflow: clip 的表现和 overflow:hidden 基本一致——都会裁剪超出容器的内容，但它不会移除滚动条的占位区域，滚动条会保持可见状态但无法拖动。这样就能完美避免滚动条消失带来的内容偏移问题。

代码示例：

body {
  overflow: clip;
}

注意：这个属性是CSS较新的特性，现代主流浏览器（Chrome、Firefox、Edge等）都支持，但旧版IE不兼容，如果你的项目不需要兼容老IE，这是最优解。

2. 动态补全滚动条占位宽度（兼容所有浏览器） #

如果必须使用overflow:hidden，可以通过JS计算滚动条的实际宽度，然后给body添加对应的右侧内边距，模拟滚动条的占位空间，让内容不会因为滚动条消失而偏移。

代码示例：

// 计算滚动条宽度
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
// 给body设置内边距和overflow:hidden
document.body.style.paddingRight = `${scrollbarWidth}px`;
document.body.style.overflow = 'hidden';

这种方法兼容性拉满，适合所有浏览器，但需要依赖JS动态计算。

内容的提问来源于stack exchange，提问作者Maryna Serhiichuk