antd Select(下拉弹框类)组件页面滚动时,下拉内容与弹出父组件分离

antd Select(下拉弹框类)组件页面滚动时,下拉内容与弹出父组件分离
使用Select组件,当点击Select组件出现下拉选项后滚动原始页面,出现下拉选项和Select框分离的异常。

原因

ant所有的弹框都是默认挂载在body下面,然后绝对定位的。所以滚动body内容, 就会造成与弹出触发的那个组件错位。

解决

ant所有的弹框都是默认挂载在body下面,然后绝对定位的。所以滚动body内容, 就会造成与弹出触发的那个组件错位。使用getPopupContainer属性。可以让下拉内容挂载任何存在的dom节点上,并相对其定(所以也可以获取到dom节点来为其定位)
文档里面说的也很清楚
antd Select(下拉弹框类)组件页面滚动时,下拉内容与弹出父组件分离
antd Select(下拉弹框类)组件页面滚动时,下拉内容与弹出父组件分离

<Select  
    getPopupContainer={triggerNode => triggerNode.parentElement}                
>
 </Select>
TreeSelect组件也是这个属性

注意DatePicker不一样

<DatePicker
     getCalendarContainer={trigger => trigger.parentNode}
 />

antd Select(下拉弹框类)组件页面滚动时,下拉内容与弹出父组件分离

上一篇:CF710F String Set Queries


下一篇:IDEA快捷键