如何在页面加载时禁用滚动（含加载动画期间）-java教程-PHP中文网

通过为添加 overflow: hidden 并配合固定定位的全屏加载层，可彻底阻止用户在 2.5 秒加载期内滚动页面，确保视觉一致性与交互可控性。

通过为 `

` 添加 `overflow: hidden` 并配合固定定位的全屏加载层，可彻底阻止用户在 2.5 秒加载期内滚动页面，确保视觉一致性与交互可控性。

在构建带有加载动画（loader）的单页网站时，一个常见但易被忽视的问题是：即使 loader 层已覆盖全屏，用户仍可滚动背景内容——这不仅破坏沉浸感，还可能导致布局错位或 AOS 动画异常触发。你当前的代码中仅对 .loader-wrapper 设置了 overflow: hidden，但这仅作用于该元素自身，无法阻止

或的全局滚动行为。

✅ 正确解法是控制文档根级滚动能力，而非仅修饰 loader 容器：

1. JavaScript 控制 body 滚动状态

在 loader 显示时禁用滚动，隐藏后恢复：

function $(qry) { return document.querySelector(qry); }

// 页面加载开始：锁定滚动
document.body.style.overflow = 'hidden';

// 2.5 秒后移除 loader 并恢复滚动
setTimeout(() => {
  $(".loader-wrapper").classList.add("invis");
  $(".content").classList.add("vis");

  // 关键：恢复 body 滚动
  document.body.style.overflow = '';
}, 2500);

? 提示：使用 ''（空字符串）而非 'auto' 更安全，可继承浏览器默认行为，避免在 Safari 等浏览器中出现意外空白条。

2. 增强 loader 层的定位鲁棒性（推荐补充）

虽然 position: fixed 不是禁用滚动的必要条件（overflow: hidden 在 body 上已足够），但它能确保 loader 始终覆盖视口、不随滚动偏移：

.loader-wrapper {
  position: fixed; /* ✅ 替换原 absolute，确保不随滚动移动 */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  transition: opacity 0.5s ease;
}

同时建议移除原 CSS 中 .loader-wrapper { overflow: hidden } ——它在此场景下无实际作用，且可能干扰内部元素（如未来添加的动画图标）。

3. 进阶优化：支持键盘焦点与可访问性

若用户通过 Tab 键聚焦到页面内链接（如跳转锚点），即使滚动被禁，焦点仍可能移出视口。可配合以下逻辑提升体验：

// 加载期间临时禁用键盘滚动（可选）
let isLoaderActive = true;
document.addEventListener('keydown', (e) => {
  if (isLoaderActive && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === ' ' || e.key === 'PageDown' || e.key === 'PageUp')) {
    e.preventDefault();
  }
});

// 加载结束时启用
setTimeout(() => {
  isLoaderActive = false;
  document.body.style.overflow = '';
}, 2500);

总结

❌ 错误做法：仅对 loader 元素设 overflow: hidden 或 position: absolute
✅ 正确核心：document.body.style.overflow = 'hidden' + position: fixed
⚠️ 注意事项：务必在 loader 隐藏后恢复 overflow，否则页面将永久不可滚动；避免在移动端 body 上直接操作 overflow 时未设置 height: 100%（你当前 HTML 已有 html, body { height: 100% }，符合要求）。

此方案轻量、兼容性好（支持所有现代浏览器），且与你现有的 AOS 动画、CSS 变量和响应式结构完全兼容。