求助：使用overscroll-behavior: none无法阻止模态框后页面滚动

核心问题分析 #

你之前尝试的overscroll-behavior: none仅作用于元素自身的滚动溢出，无法阻止底层页面滚动；单独给body加overflow: hidden无效，是因为部分浏览器（如Chrome）中页面滚动实际由<html>元素控制，仅设置body不会生效。另外直接加overflow: hidden会导致页面跳回顶部，需要先保存滚动位置再恢复。

实现方案 #

以下是完整可运行代码，包含模态框显示/隐藏逻辑，以及滚动冻结与位置恢复的处理：

HTML 结构

<html>
  <body>
    <div class="content">
      <p>I am a body full of content, enough to make it scroll.</p>
      <p>I am a body full of content, enough to make it scroll.</p>
      <p>I am a body full of content, enough to make it scroll.</p>
      <p>I am a body full of content, enough to make it scroll.</p>
      <p>I am a body full of content, enough to make it scroll.</p>
      <p>I am a body full of content, enough to make it scroll.</p>
      <button id="openModal">打开模态框</button>
    </div>

    <!-- 模态框容器 -->
    <div class="modal" id="modal">
      <!-- 模态框内容区（支持内部滚动的情况） -->
      <div class="modal-content">
        <button id="closeModal">关闭模态框</button>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
        <p>模态框内容</p>
      </div>
    </div>
  </body>
</html>

CSS 样式

.content p {
  font-size: 84px;
}

.modal {
  display: none; /* 默认隐藏 */
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  box-sizing: border-box;
}

.modal.active {
  display: flex; /* 显示模态框 */
}

.modal-content {
  width: 80%;
  max-height: 80vh; /* 限制内容高度 */
  overflow-y: auto; /* 内容超出时允许内部滚动 */
  padding: 20px;
  background: #333;
}

/* 滚动冻结的全局样式 */
body.freeze-scroll,
html.freeze-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

JavaScript 逻辑

const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');
let scrollTop = 0;

// 打开模态框
openBtn.addEventListener('click', () => {
  // 保存当前滚动位置
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 添加滚动冻结样式
  document.body.classList.add('freeze-scroll');
  document.documentElement.classList.add('freeze-scroll');
  // 显示模态框
  modal.classList.add('active');
});

// 关闭模态框
closeBtn.addEventListener('click', () => {
  // 移除滚动冻结样式
  document.body.classList.remove('freeze-scroll');
  document.documentElement.classList.remove('freeze-scroll');
  // 隐藏模态框
  modal.classList.remove('active');
  // 恢复之前的滚动位置
  window.scrollTo(0, scrollTop);
});

关键细节说明 #

1. 同时冻结html和body：给<html>和<body>都添加overflow: hidden和position: fixed，确保所有浏览器下都能阻止页面滚动。
2. 保存并恢复滚动位置：打开模态框时记录当前滚动距离，关闭时通过window.scrollTo恢复，避免页面跳回顶部。
3. 模态框内部滚动处理：给模态框的内容容器设置max-height和overflow-y: auto，实现模态框内部可滚动，同时不影响主体页面。

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