防止日期選擇器隨頁面滾動

Question

我正在制作一個由antd組成的日期選擇器的反應應用程序

簡單的 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")
);

工作示例：

重現：如果用戶點擊輸入，日期選擇器會顯示，但是當我們嘗試向下滾動時，日期選擇器也會隨着頁面滾動。

預期結果：日期選擇器不應滾動，它需要位於輸入框下方。

任何幫助都將是非常可觀的。 提前致謝。

Answer 1

這在他們的常見問題解答中有所描述： https://ant.design/docs/react/faq#How-do-I-prevent-Select-Dropdown-DatePicker-TimePicker-Popover-Popconfirm-scrolling-with-the-page ?

1. 將position: "relative"添加到父元素。
2. 將getPopupContainer={trigger => trigger.parentElement}添加到您的DatePicker 。