Ant Design 4.6.1 弹窗/抽屉等组件打开时背景滚动问题如何解决？

解决方案 #

• 优先检查全局配置是否关闭了默认锁滚动能力
  Ant Design 4.6.1版本的Modal、Drawer组件默认开启lockScroll属性，打开时会自动给body添加overflow: hidden禁止滚动。如果出现不生效的情况，优先排查入口处是否通过ConfigProvider全局将Modal、Drawer的lockScroll属性设为了false，改回true即可恢复默认能力。
• 单组件显式指定锁滚动属性
  如果没有全局配置，可在用到的Modal、Drawer组件上手动添加lockScroll={true}属性，即可触发内置的滚动锁定逻辑，无需手动操作body样式。
• 下拉类组件（Select、Dropdown）滚动穿透处理
  这类弹出层组件默认不会锁body滚动，可通过修改弹出层挂载节点解决：
  1. 单组件使用时添加getPopupContainer属性，指定挂载到触发元素的父节点：

  <Select getPopupContainer={trigger => trigger.parentElement} />
  <Dropdown getPopupContainer={trigger => trigger.parentElement} />
  

  2. 全局统一配置无需逐个组件修改，在入口文件的ConfigProvider中添加如下配置：

  import { ConfigProvider } from 'antd';
  
  ReactDOM.render(
    <ConfigProvider
      getPopupContainer={node => node ? node.parentElement : document.body}
    >
      <App />
    </ConfigProvider>,
    document.getElementById('root')
  );
  

• 通用自定义锁滚动封装
  如果以上内置能力都不符合需求，可封装自定义Hooks统一处理，避免重复编写原生JS操作body的逻辑：

  import { useEffect, useState } from 'react';
  
  // 自定义锁滚动Hooks
  const useLockBodyScroll = (isLock) => {
    useEffect(() => {
      const originalOverflow = document.body.style.overflow;
      if (isLock) {
        document.body.style.overflow = 'hidden';
      }
      return () => {
        document.body.style.overflow = originalOverflow;
      };
    }, [isLock]);
  };
  
  // 业务组件中使用
  const Demo = () => {
    const [modalVisible, setModalVisible] = useState(false);
    useLockBodyScroll(modalVisible);
  
    return <Modal visible={modalVisible} onCancel={() => setModalVisible(false)} />
  };
  

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