移动端iOS模态框滚动时禁止背景滚动且避免页面跳顶解决方案

我之前在做iOS端内部带滚动内容的模态框时，也踩过这个一模一样的坑——用position: fixed确实能挡住背景滚动，但跳顶的体验真的太糟糕了。给你几个亲测有效的解决方案，按需选就行：

方案一：记录滚动位置，用top值抵消fixed的跳顶 #

这是最直接的思路：给body加fixed前，先把当前的滚动位置存下来，然后通过top属性把页面“拉回”原来的位置，关闭时再恢复滚动状态。

实现代码： #

// 打开模态框的逻辑
function openModal() {
  // 保存当前滚动位置（兼容不同浏览器的写法）
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 给body设置fixed，同时用top抵消滚动距离，避免跳顶
  document.body.style.position = 'fixed';
  document.body.style.top = `-${scrollTop}px`;
  document.body.style.width = '100%'; // 防止fixed导致body宽度收缩
  // 这里加上显示模态框的代码...
}

// 关闭模态框的逻辑
function closeModal() {
  // 取出之前保存的滚动位置
  const scrollTop = parseInt(document.body.style.top) * -1;
  // 恢复body的默认样式
  document.body.style.position = '';
  document.body.style.top = '';
  document.body.style.width = '';
  // 滚动回原来的位置
  window.scrollTo(0, scrollTop);
  // 这里加上隐藏模态框的代码...
}

为什么有效？ #

position: fixed会让元素默认回到视口顶部，我们通过设置top: -scrollTop，相当于把body向上移动了和滚动距离相等的距离，视觉上完全不会有跳顶的感知。

方案二：阻止背景的touchmove事件（不用fixed） #

如果不想用fixed，也可以通过监听触摸事件来精准阻止背景滚动，同时保留模态框内的滚动功能。这个方法更贴合iOS的触摸特性，但需要准确判断滚动的目标元素。

实现代码： #

let preventScrollHandler;

function openModal() {
  // 定义阻止背景滚动的事件处理函数
  preventScrollHandler = (e) => {
    // 判断当前触摸的元素是否在模态框的滚动内容内
    const isModalContent = e.target.closest('.modal-scroll-content');
    if (!isModalContent) {
      // 不是模态框内的滚动，阻止默认行为
      e.preventDefault();
    }
  };
  // 监听touchmove事件，注意passive必须设为false才能调用preventDefault
  document.addEventListener('touchmove', preventScrollHandler, { passive: false });
  // 这里加上显示模态框的代码...
}

function closeModal() {
  // 移除事件监听，恢复正常滚动
  document.removeEventListener('touchmove', preventScrollHandler);
  // 这里加上隐藏模态框的代码...
}

配套CSS（保证模态框内滚动流畅）： #

.modal-scroll-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 开启iOS原生滚动流畅度 */
}

方案三：结合CSS类和滚动位置优化 #

如果喜欢用CSS类统一管理状态，可以把样式抽离出来，用JavaScript动态控制滚动位置，代码更整洁：

CSS： #

.modal-open {
  position: fixed;
  width: 100%;
  inset: 0;
}

JavaScript： #

let savedScrollTop = 0;

function openModal() {
  savedScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  document.body.classList.add('modal-open');
  document.body.style.top = `-${savedScrollTop}px`;
  // 这里加上显示模态框的代码...
}

function closeModal() {
  document.body.classList.remove('modal-open');
  document.body.style.top = '';
  window.scrollTo(0, savedScrollTop);
  // 这里加上隐藏模态框的代码...
}

这个方案适合大型项目中统一管理模态框的状态，维护起来更方便。

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