如何阻止Modal弹窗显示时背景页面的滚动事件传播？

为什么你之前的设置无效？ #

1. 移动端浏览器滚动机制差异：像Safari这类移动端浏览器，视口滚动和body元素的滚动是分离的。仅给body设置overflow:hidden，无法完全阻止浏览器视口的滚动行为，页面依然能被拖动。
2. 遮罩层overflow设置不对症：你给overlay加的overflow:hidden，只能控制遮罩自身内部内容是否溢出滚动，完全不影响背景页面的滚动逻辑，所以对解决滚动穿透没有作用。

有效解决方案 #

方案1：锁定根元素+禁用触摸默认行为 #

同时给html和body设置overflow:hidden，再加上touch-action:none（阻止触摸相关的浏览器默认行为），在Modal显示/隐藏时动态切换：

import { useEffect } from 'react';

function Modal({ visible, children }) {
  useEffect(() => {
    const html = document.documentElement;
    const body = document.body;

    if (visible) {
      html.style.overflow = 'hidden';
      body.style.overflow = 'hidden';
      html.style.touchAction = 'none';
      body.style.touchAction = 'none';
    } else {
      // 恢复原有样式
      html.style.overflow = '';
      body.style.overflow = '';
      html.style.touchAction = '';
      body.style.touchAction = '';
    }

    // 组件卸载时恢复样式
    return () => {
      html.style.overflow = '';
      body.style.overflow = '';
      html.style.touchAction = '';
      body.style.touchAction = '';
    };
  }, [visible]);

  return visible ? (
    <div className="overlay">
      <div className="modal">{children}</div>
    </div>
  ) : null;
}

方案2：区分遮罩与内部滚动，阻止冒泡 #

如果Modal内部有需要滚动的内容，不能直接禁用所有触摸行为。可以在遮罩层上监听触摸事件，仅当触摸目标是遮罩本身时，阻止默认滚动行为：

function Modal({ visible, children }) {
  const handleOverlayTouch = (e) => {
    // 只有点击遮罩本身时，阻止默认滚动
    if (e.target === e.currentTarget) {
      e.preventDefault();
    }
  };

  return visible ? (
    <div className="overlay" onTouchStart={handleOverlayTouch}>
      {/* 内部可滚动区域需设置固定高度和overflow-y:auto */}
      <div className="modal" style={{ maxHeight: '80vh', overflowY: 'auto' }}>
        {children}
      </div>
    </div>
  ) : null;
}

这种方法既能阻止背景滚动，又不影响Modal内部的滚动体验。

方案3：fixed定位body，恢复滚动位置 #

当Modal显示时，给body设置position:fixed，同时记录当前滚动位置；隐藏时恢复body定位并回到之前的滚动位置，彻底切断背景滚动的可能：

import { useEffect } from 'react';

function Modal({ visible, children }) {
  useEffect(() => {
    const body = document.body;
    let scrollTop = 0;

    if (visible) {
      // 记录当前滚动位置
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      body.style.position = 'fixed';
      body.style.top = `-${scrollTop}px`;
      body.style.width = '100%';
    } else {
      // 恢复定位和滚动位置
      body.style.position = '';
      body.style.top = '';
      window.scrollTo(0, scrollTop);
    }

    return () => {
      body.style.position = '';
      body.style.top = '';
      window.scrollTo(0, scrollTop);
    };
  }, [visible]);

  return visible ? (
    <div className="overlay">
      <div className="modal">{children}</div>
    </div>
  ) : null;
}

这个方案兼容性最好，几乎能解决所有移动端浏览器的滚动穿透问题。

内容的提问来源于stack exchange，提问作者János