防止日期选择器随页面滚动
Prevent date picker from scrolling with page
我正在制作一个具有日期选择器的 React 应用程序 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")
);
工作示例:
重现:如果用户点击输入,会显示日期选择器,但当我们尝试向下滚动时,日期选择器也会随页面一起滚动。
预期结果:日期选择器不应滚动,它需要位于输入框下方。
如有任何帮助,我们将不胜感激。提前致谢。
这在他们的常见问题解答中有描述: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
。
我正在制作一个具有日期选择器的 React 应用程序 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")
);
工作示例:
重现:如果用户点击输入,会显示日期选择器,但当我们尝试向下滚动时,日期选择器也会随页面一起滚动。
预期结果:日期选择器不应滚动,它需要位于输入框下方。
如有任何帮助,我们将不胜感激。提前致谢。
这在他们的常见问题解答中有描述: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
。