如何在加载动画期间禁用页面滚动？-html教程-PHP中文网

如何在加载动画期间禁用页面滚动？

本文介绍一种轻量、兼容性强且不干扰现有 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 规则。