如何在页面加载显示loader时禁用页面滚动？

你之前给.loader-wrapper加overflow:hidden无效，是因为页面的滚动条属于<body>/<html>元素，不是loader容器本身，正确的做法是给根元素设置禁用滚动：

实现步骤 #

• 给<body>添加一个控制滚动的类，通过添加/移除这个类来开关滚动
• 配合Loader的显示/隐藏逻辑，在Loader展示时禁用滚动，结束后恢复

1. CSS 代码 #

/* 禁用页面滚动的类 */
.body-no-scroll {
  overflow: hidden;
}

/* 确保Loader全屏覆盖 */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff; /* 根据你的页面调整背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 保证Loader在最上层 */
}

2. JavaScript 代码 #

// 页面加载完成后启动Loader逻辑
window.addEventListener('load', () => {
  const body = document.body;
  const loader = document.querySelector('.loader-wrapper');

  // 禁用滚动
  body.classList.add('body-no-scroll');

  // 2.5秒后恢复滚动并隐藏Loader
  setTimeout(() => {
    body.classList.remove('body-no-scroll');
    loader.style.display = 'none';
  }, 2500);
});

移动端额外处理（可选） #

如果需要兼容移动端触摸滑动，可以添加触摸事件阻止：

// 阻止触摸滚动的函数
function blockTouchScroll(e) {
  e.preventDefault();
}

// 页面加载时添加触摸阻止
window.addEventListener('load', () => {
  document.addEventListener('touchmove', blockTouchScroll, { passive: false });

  // 2.5秒后移除阻止
  setTimeout(() => {
    document.removeEventListener('touchmove', blockTouchScroll);
  }, 2500);
});

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