React：打开模态框时阻止背景滚动，解决position:fixed跳顶问题

问题根源是给body设置position: fixed时，浏览器会自动将页面滚动位置重置为0，导致跳顶。下面是两种可行的解决方法：

方法一：记录并恢复滚动位置 #

打开模态框时先保存当前滚动距离，设置fixed的同时用top属性固定页面位置，关闭时再恢复样式和滚动位置：

import { useState } from 'react';

function PostPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [savedScrollTop, setSavedScrollTop] = useState(0);

  const handleOpenModal = () => {
    // 保存当前滚动位置
    const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    setSavedScrollTop(currentScroll);
    
    // 锁定页面滚动，同时固定位置防止跳顶
    document.body.style.position = 'fixed';
    document.body.style.top = `-${currentScroll}px`;
    document.body.style.overflow = 'hidden';
    
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    
    // 恢复页面样式
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.overflow = '';
    
    // 回到之前的滚动位置
    window.scrollTo(0, savedScrollTop);
  };

  return (
    <>
      {/* 帖子列表 */}
      <div className="post-list">
        {/* 每个帖子的菜单按钮 */}
        <button onClick={handleOpenModal}>...</button>
      </div>

      {/* 模态框 */}
      {isModalOpen && (
        <div className="modal-overlay" onClick={handleCloseModal}>
          <div className="modal-menu" onClick={e => e.stopPropagation()}>
            <button onClick={handleCloseModal}>关闭</button>
            <div>编辑帖子</div>
            <div>删除帖子</div>
          </div>
        </div>
      )}
    </>
  );
}

export default PostPage;

方法二：仅用overflow:hidden并抵消滚动条宽度 #

如果不想用fixed，可以直接给body设置overflow: hidden阻止滚动，但此时页面滚动条消失会导致内容轻微右移，需要计算滚动条宽度并给body加padding抵消：

import { useState } from 'react';

function PostPage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [originalPadding, setOriginalPadding] = useState('');

  const handleOpenModal = () => {
    // 计算滚动条宽度
    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
    // 保存原padding值
    setOriginalPadding(document.body.style.paddingRight);
    
    // 锁定滚动并抵消滚动条宽度
    document.body.style.overflow = 'hidden';
    document.body.style.paddingRight = `${scrollBarWidth}px`;
    
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    
    // 恢复原样式
    document.body.style.overflow = '';
    document.body.style.paddingRight = originalPadding;
  };

  // 帖子和模态框结构同方法一
  return (
    <>
      {/* 帖子列表和模态框 */}
    </>
  );
}

两种方法对比：

• 方法一兼容性更好，适合复杂布局场景，完全避免跳顶问题
• 方法二更简洁，适合布局相对简单的页面，无需处理滚动位置记录

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