html使用antd的下拉框控件,看一看antd 中 select/dropdown 等组件的下拉框

背景：在项目中使用 select 组件，点击 select 出现下拉框的状态时，滑动页面下拉框不跟随 select 组件滑动。也就是不固定在 select 组件的下方。

于是开始思考：

antd 是怎么实现下拉框的？下拉框跟随滚动是怎么做的？

先说解决办法吧：

查看API文档：

getPopupContainer： 菜单(下拉框哈)渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。

getPopupContainer 接受一个函数作为参数，函数执行时会接受一个组件传给他的参数 triggerNode，返回菜单渲染的父节点。

所以可以设置：

getPopupContainer={(triggerNode) => triggerNode.parentNode}

这时候菜单渲染的父节点就是 antd 的 select 组件。

当然你可以设置为其他任意的节点为下拉框的父节点。但需要注意的是，下拉框是绝对定位的，要使滑动生效的话，最好父节点设置为相对定位(绝对定位也可，只是要注意与父节点同级的元素的位置关系)。否则下拉框会继续向上寻找定位不为 static 的元素，有可能就找到了 document.body 。起不到吸附的作用。

实现下拉组件的原理解析

在不设置 getPopupContainer 属性的时候，默认当第一次触发下拉框组件时，会在 body 节点下生成一个绝对定位的 div(下拉框的父节点)：