getPopupContainer={trigger => trigger.parentElement}是什么意思？滚动弹窗解惑

你遇到的滚动时弹窗移位问题，本质是弹窗默认挂载位置和触发元素的层级关系导致的。下面拆解这段代码的具体作用：

• 默认挂载逻辑：多数UI组件库的弹窗组件默认会把弹窗渲染到document.body节点下，这样能保证弹窗层级最高、不被其他元素遮挡，但代价是弹窗定位脱离了触发元素的父容器——当页面滚动或触发元素所在父容器滚动时，弹窗因和触发元素不在同一上下文，就会出现移位。

• getPopupContainer的核心作用：这是组件库提供的配置项，本质是一个回调函数，用来指定弹窗最终挂载的父DOM节点。你传入的trigger => trigger.parentElement，就是明确告诉组件：把弹窗挂载到触发它的元素的父元素里面。

• 解决移位的原理：当弹窗挂载到触发元素的父容器后，它的定位会和这个父容器绑定。不管页面整体滚动，还是父容器内部滚动，弹窗都会跟着父容器一起移动，始终保持和触发元素的相对位置，自然就不会移位了。

• 折叠/展开时调用的原因：折叠、展开这类操作会改变DOM结构或父容器布局，组件需要重新确认弹窗的挂载位置，避免弹窗因DOM变化出现位置错误，所以会再次调用这个回调函数，确保弹窗始终挂载到正确的父节点上。

内容的提问来源于stack exchange，提问作者Renee