本文介绍一种轻量、兼容性强的方法：通过动态为 添加 prevent-scroll 类并配合 CSS 控制 overflow: hidden，在预加载动画显示时阻止用户滚动，动画结束后立即恢复，避免干扰原有布局和样式。
本文介绍一种轻量、兼容性强的方法：通过动态为 `
` 添加 `prevent-scroll` 类并配合 css 控制 `overflow: hidden`，在预加载动画显示时阻止用户滚动，动画结束后立即恢复，避免干扰原有布局和样式。在实现全屏加载动画（如 SVG 绘制 + GSAP 淡出）时，若不禁止滚动，用户可能在动画未结束前就拖动页面，导致内容提前可见、布局错位，甚至触发不必要的事件。许多开发者尝试直接设置 body { overflow: hidden }，但容易因未重置 height 或与其他 CSS 冲突（如 min-height、flex 容器）而引发视觉异常或滚动条残留。
✅ 推荐方案：精准控制 + 语义化类名
只需两步即可安全生效：
-
定义专用 CSS 类（推荐放在
<style></style>或主样式表中）：body.prevent-scroll { height: 100vh; /* 关键：固定视口高度，防止 body 高度塌陷 */ overflow: hidden; /* 禁用滚动 */ position: relative; /* 避免部分浏览器下 fixed 元素定位偏移 */ }⚠️ 注意：仅设
overflow: hidden不够！若body原有min-height: 100%或使用display: flex，移除滚动后可能高度计算异常，导致底部留白或遮罩不覆盖全屏。height: 100vh可确保.cr-loading-overlay始终覆盖可视区域。 -
JS 中动态添加/移除类（与 GSAP 动画生命周期同步）：
// 加载开始时立即禁用滚动（建议在 DOM 加载后、动画启动前执行） document.body.classList.add('prevent-scroll');
// 在 GSAP 动画完成回调中恢复滚动 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('prevent-scroll'); // ✅ 关键：务必移除 // 可选：恢复内容可见性（如 .content { opacity: 1 }） document.querySelector('.content')?.style.opacity = '1'; } } );
? 补充说明：
- **为什么不用 `document.documentElement.style.overflow`？**
直接操作 `documentElement`（即 `<html>`）在部分 iOS Safari 和旧版 Android 浏览器中兼容性差，且易与 `viewport` meta 设置冲突；操作 `<body>` 类更稳定、可维护。
- **是否影响辅助功能？**
是的——禁用滚动会中断键盘导航（如 Tab 键聚焦后按空格/方向键）。若网站需高可访问性，建议在加载完成后再启用交互，并为屏幕阅读器添加 `aria-busy="true"` 属性到加载容器。
- **移动端特别注意**：
iOS Safari 对 `overflow: hidden` 在 `<body>` 上的支持较弱，可追加一行增强兼容性：
```css
body.prevent-scroll {
height: 100vh;
overflow: hidden;
position: fixed; /* 替代 relative，对 iOS 更可靠 */
width: 100vw;
}? 总结：禁用加载期滚动的核心是「精准作用域 + 可逆操作」。避免全局样式污染（如直接写 body { overflow: hidden }），而是用语义化类名（prevent-scroll）明确意图，并严格配对 add/remove，确保动画结束后的体验无缝回归。该方法零依赖、无副作用，完美适配您当前基于 GSAP 的预加载流程。
