防止日期选择器随页面滚动

Posted 2023-02-19

【中文标题】防止日期选择器随页面滚动

【英文标题】：Prevent date picker from scrolling with page

【发布时间】：2022-01-23 21:12:01

【问题描述】：

我正在制作一个包含 antd 的日期选择器的 React 应用程序

简单的index.js代码：

import React from "react";
import ReactDOM from "react-dom";
import  DatePicker  from "antd";
import "antd/dist/antd.css";
import "./index.css";

ReactDOM.render(
  <div className="App">
    <h1>Select date-picker scroll bug.</h1>
    <div
      style= marginTop: "16px", width: 500, overflow: "scroll", height: 400 
    >
      <DatePicker />
      <div style= minHeight: 500 ></div>
    </div>
  </div>,
  document.getElementById("root")
);

工作示例：

重现：如果用户点击输入，日期选择器会显示，但当我们尝试向下滚动时，日期选择器也会随着页面滚动。

预期结果：日期选择器不应滚动，它需要位于输入框下方。

任何帮助都会非常感激。提前致谢。

【参考方案1】：

这在他们的常见问题解答中有所描述：https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page?

将position: "relative" 添加到父元素。 将getPopupContainer=trigger => trigger.parentElement 添加到您的DatePicker。

【讨论】：

这是因为弹出窗口在父组件的 DOM 元素之外呈现为模式。此修复将弹出容器设置为触发器的父级。