如何实现加载动画显示时页面不可滚动？已尝试overflow:hidden无效

问题根源 #

你之前尝试给#epicloader添加overflow:hidden无效，是因为页面的滚动行为由<body>（或<html>）元素控制，加载层仅作为覆盖层存在，无法干预底层元素的滚动。

解决方案 #

通过控制<body>的overflow属性实现需求：加载阶段禁用滚动，加载完成后恢复。

1. 调整CSS代码 #

添加初始状态下body的滚动限制样式，其余原有CSS保持不变：

/* 初始状态：页面不可滚动 */
body {
  overflow: hidden;
  margin: 0; /* 可选：避免隐藏overflow后出现横向滚动条 */
}

#epicloader{
  background-color: black;
  opacity: 0.8;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  touch-action: none; /* 可选：解决iOS设备滚动穿透问题 */
}

.circle1{
  width: 100px;
  height: 100px;
  border: 3px solid white;
  border-radius: 100%;
  border-right: 3px solid black;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  animation: spin1 1s linear infinite;
  opacity: 1;
}

.circle2{
  width: 70px;
  height: 70px;
  border: 3px dotted #6e3030;
  border-radius: 100%;
  border-right: 3px solid black;
  animation: spin2 4s linear infinite;
  opacity: 1;
}

@keyframes spin1{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

@keyframes spin2{
  from{
    transform: rotate(0deg);
  }
  50%{
    border: 3px dotted #1e62eb;
    border-right: 3px solid black;
  }
  to{
    transform: rotate(360deg);
  }
}

2. 修改JavaScript代码 #

加载完成后，同时隐藏加载层并恢复body的滚动能力：

window.onload = function() {
  document.getElementById("epicloader").style.display = "none";
  // 恢复页面滚动
  document.body.style.overflow = "auto";
}

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