React-popup设置lockScroll=true仍无法阻止页面滚动求助

针对你遇到的react-popup弹窗打开时document.body被强制设置overflow: auto、手动修改会被覆盖的问题，给你几个可行的解决思路：

1. 手动监听弹窗状态，强制锁定滚动 #

利用React的useEffect监听弹窗的open状态，通过CSS类提升样式优先级，避免被组件内部逻辑覆盖：

第一步：添加全局CSS类 #

.popup-scroll-locked {
  overflow: hidden !important;
}

第二步：在弹窗所在组件中添加状态监听 #

import { useEffect } from 'react';

// 假设open是控制弹窗显示的状态变量
useEffect(() => {
  if (open) {
    document.body.classList.add('popup-scroll-locked');
  } else {
    document.body.classList.remove('popup-scroll-locked');
  }

  // 组件卸载时恢复默认样式，避免影响其他页面
  return () => {
    document.body.classList.remove('popup-scroll-locked');
  };
}, [open]);

2. 禁用组件自带lockScroll，完全手动控制 #

如果组件的lockScroll属性存在逻辑冲突，直接关闭它，通过弹窗的打开/关闭回调自行控制滚动：

const handleOpen = () => {
  setOpen(true);
  document.body.style.overflow = 'hidden';
};

const closeModal = () => {
  setOpen(false);
  document.body.style.overflow = ''; // 恢复默认样式
};

// 修改弹窗组件配置
<Popup 
    modal 
    on="focus"
    role="dialog"
    open={open}
    closeOnDocumentClick={false} 
    lockScroll={false} // 关闭组件自带的滚动锁定逻辑
    onOpen={handleOpen}
    onClose={closeModal}
    overlayStyle={{ background: 'rgba(0,0,0,0.5)' }}
>
    {/* 弹窗内容 */}
</Popup>

3. 检查属性冲突 #

你设置了on="focus"作为弹窗触发方式，该属性可能和lockScroll逻辑存在冲突，尝试将触发方式改为on="click"测试：

<Popup 
    modal 
    on="click" // 修改触发方式
    role="dialog"
    open={open}
    closeOnDocumentClick={false} 
    lockScroll={true}
    onClose={closeModal}
    overlayStyle={{ background: 'rgba(0,0,0,0.5)' }}
>
    {/* 弹窗内容 */}
</Popup>

内容的提问来源于stack exchange，提问作者Alexis B.