Ant Design式遮盖层：滚动还是禁止，掌控由你

前端

2023-08-28 09:52:16

Ant Design 遮盖层：滚动或禁止，由你掌控

在 UI 设计领域，遮盖层是一种不可或缺的元素，它能实现弹窗、模态框等多种功能。不过，遮盖层出现时通常会阻碍用户与页面交互。好在，Ant Design 提供了灵活的遮盖层组件，让你在遮盖层出现的同时，还能让用户继续滚动页面。

Ant Design 遮盖层滚动控制

Ant Design 遮盖层组件提供了以下属性，可控制滚动行为：

scroll 属性： 此属性决定遮盖层是否阻止滚动。设为 false，页面在遮盖层下依然可滚动；设为 true，则滚动会被禁止。
getContainer 属性： 此属性指定遮盖层的容器元素。通过设置一个函数，遮盖层将渲染到函数返回的元素中，从而控制滚动行为。
className 属性： 此属性设置遮盖层的 CSS 类名。在 CSS 中通过类名添加样式，可进一步控制遮盖层的滚动行为。

代码示例

来看看如何使用 Ant Design 实现允许滚动的遮盖层：

import { Modal } from 'antd';

const App = () => {
  const [visible, setVisible] = useState(false);

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button onClick={() => setVisible(true)}>Show Modal</Button>
      <Modal
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        scroll={false} // 允许滚动
        getContainer={() => document.body} // 设置容器为 body
        className="custom-modal" // CSS 类名
      >
        <p>This is a modal.</p>
      </Modal>
    </div>
  );
};

export default App;