本文介绍一种轻量、兼容性强且不干扰现有 css 的方法，通过动态切换 body 类来禁用页面滚动，确保加载动画期间用户无法滚动页面。
本文介绍一种轻量、兼容性强且不干扰现有 css 的方法，通过动态切换 body 类来禁用页面滚动，确保加载动画期间用户无法滚动页面。
在实现全屏加载动画（如 SVG 绘制 + GSAP 淡出）时，一个常见但易被忽视的问题是：用户仍可滚动背景内容，导致视觉割裂、布局抖动，甚至触发意外交互。直接修改 body { overflow: hidden } 看似简单，但若未配合高度约束，可能引发 Safari 等浏览器的回弹/空白问题；而全局覆盖 overflow 又容易与现有 CSS（如自定义滚动容器、modal、sticky header）产生冲突。
✅ 推荐方案：语义化类名 + 精准样式控制
只需为 添加一个临时类（例如 loading-active），并在 CSS 中精准定义其行为：
body.loading-active {
height: 100vh;
overflow: hidden;
position: fixed; /* 可选：防止 iOS 滚动穿透 */
top: 0;
left: 0;
width: 100%;
}? 为什么是
height: 100vh而非100%？100%依赖父元素（html）高度，而html默认无显式高度，可能导致失效；100vh始终锚定视口，兼容性更佳，且能彻底阻止滚动条出现。
在你的 GSAP 动画逻辑中，在加载开始时添加类，动画完成后再移除：
// ✅ 加载开始前：锁定滚动
document.body.classList.add("loading-active");
// ✅ 使用 GSAP 完成后移除（推荐在 onComplete 中执行）
gsap.fromTo(
".cr-loading-overlay",
{ opacity: 1 },
{
opacity: 0,
duration: 1.5,
delay: 2.5,
onComplete: () => {
document.querySelector(".cr-loading-overlay").style.display = "none";
document.body.classList.remove("loading-active"); // ? 关键：恢复滚动
// 可选：渐显主内容
document.querySelector(".content").style.opacity = 1;
}
}
);⚠️ 注意事项：
-
避免
overflow: hidden直接写在body标签上（如），这会覆盖所有内联样式，难以维护； -
不要仅用
position: fixed：它虽能“冻结”滚动，但可能使页面重置到顶部，且在部分安卓 WebView 中表现不稳定； -
移动端需额外注意：iOS Safari 对
overflow: hidden在body上的支持较弱，position: fixed + 100vh是更可靠的兜底组合； - 若页面已存在
html { overflow-x: hidden }等全局设置，请确保.loading-active的优先级足够（可通过提高选择器权重或使用!important—— 仅当必要时）。
? 进阶提示：
如需支持“加载中暂停滚动但允许触摸拖拽惯性”，可改用 overscroll-behavior: none 配合 scroll-behavior: auto，但当前场景下 overflow: hidden 已是最简洁可靠的解法。
综上，该方案零侵入、易维护、跨浏览器稳定，完美适配你现有的 GSAP + SVG 加载流程，无需重构 HTML 结构或调整现有 CSS 规则。
