React中模态框悬浮或聚焦时如何禁用父级/body滚动（保留滚动条）

要在React项目中实现「模态框显示时禁用body滚动但保留滚动条可见性」，可以用以下两种实用方案：

方案一：通过padding抵消滚动条宽度（推荐新手） #

核心思路是：用overflow: hidden禁用滚动，同时计算滚动条的宽度，给body添加相等的padding-right，这样页面不会因为滚动条消失而偏移，视觉上保留滚动条的占位。

React代码示例 #

import { useEffect } from 'react';

const Modal = ({ isOpen, onClose }) => {
  useEffect(() => {
    const body = document.body;
    let originalPadding = body.style.paddingRight;
    let originalOverflow = body.style.overflow;
    // 记录所有固定定位元素的原始padding
    const fixedElements = Array.from(document.querySelectorAll('.fixed'));
    const originalFixedPaddings = fixedElements.map(el => el.style.paddingRight);

    if (isOpen) {
      // 计算滚动条宽度
      const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
      // 禁用body滚动并添加padding抵消滚动条宽度
      body.style.overflow = 'hidden';
      body.style.paddingRight = `${scrollBarWidth}px`;
      // 同步调整固定元素的padding，避免偏移
      fixedElements.forEach((el, index) => {
        el.style.paddingRight = `${scrollBarWidth}px`;
      });
    } else {
      // 恢复原始样式
      body.style.overflow = originalOverflow;
      body.style.paddingRight = originalPadding;
      fixedElements.forEach((el, index) => {
        el.style.paddingRight = originalFixedPaddings[index];
      });
    }

    // 组件卸载时强制恢复样式
    return () => {
      body.style.overflow = originalOverflow;
      body.style.paddingRight = originalPadding;
      fixedElements.forEach((el, index) => {
        el.style.paddingRight = originalFixedPaddings[index];
      });
    };
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <div className="modal-content" style={{
        backgroundColor: 'white',
        padding: '2rem',
        borderRadius: '8px'
      }}>
        <button onClick={onClose} style={{ marginBottom: '1rem' }}>关闭模态框</button>
        <p>这是模态框内容</p>
      </div>
    </div>
  );
};

export default Modal;

注意点 #

• 如果页面中有position: fixed的元素（比如导航栏），需要给它们加上.fixed类，代码会自动同步调整padding，避免元素偏移。
• 该方案不会改变body的定位逻辑，兼容性好，适合大多数场景。

方案二：固定body位置并保存滚动状态 #

核心思路是：将body设置为position: fixed，同时记录当前滚动位置，这样body无法滚动，滚动条会自然保留；关闭模态框时恢复body定位并滚动到之前的位置。

React代码示例 #

import { useEffect } from 'react';

const Modal = ({ isOpen, onClose }) => {
  useEffect(() => {
    const body = document.body;
    let scrollTop = 0;
    const originalPosition = body.style.position;
    const originalTop = body.style.top;

    if (isOpen) {
      // 保存当前滚动位置
      scrollTop = window.scrollY;
      // 固定body，阻止滚动，同时设置top避免页面跳转到顶部
      body.style.position = 'fixed';
      body.style.top = `-${scrollTop}px`;
      body.style.width = '100%';
    } else {
      // 恢复body定位，滚动到之前的位置
      body.style.position = originalPosition;
      body.style.top = originalTop;
      window.scrollTo(0, scrollTop);
    }

    // 组件卸载时恢复样式
    return () => {
      body.style.position = originalPosition;
      body.style.top = originalTop;
      window.scrollTo(0, scrollTop);
    };
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <div className="modal-content" style={{
        backgroundColor: 'white',
        padding: '2rem',
        borderRadius: '8px'
      }}>
        <button onClick={onClose} style={{ marginBottom: '1rem' }}>关闭模态框</button>
        <p>这是模态框内容</p>
      </div>
    </div>
  );
};

export default Modal;

注意点 #

• 该方案不需要处理固定元素，但body变为fixed后，页面中依赖body作为定位父级的绝对定位元素可能会受影响，使用前需确认页面结构。
• 关闭模态框时会自动滚动到之前的位置，体验流畅。

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