react中调用antd的Select下拉框位置随页面滚动

孜然卷k

已于 2023-02-14 16:42:10 修改

阅读量801

点赞数

分类专栏： JavaScript学习 react Antd组件文章标签： react.js 前端 javascript

于 2023-02-14 10:44:53 首次发布

原文链接：https://www.jianshu.com/p/25059344688f

版权

JavaScript学习同时被 3 个专栏收录

25 篇文章

订阅专栏

react

5 篇文章

订阅专栏

Antd组件

2 篇文章

订阅专栏

博客主要围绕页面滚动时下拉框跟随滚动的问题展开。先给出原代码，接着依据官方文档解释找到解决办法，展示改变后的代码，最终解决了滚动时下拉框被带偏的问题，涉及前端开发相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面滚动后下拉框也会跟着滚动

点开样式：

页面滚动后

原代码：

<Select
  mode="multiple"
  showSearch
  optionFilterProp="children"
  style={{ width: 600 }}
  placeholder="请选择"
>
  {this.state.zhikongList.map((item: any, index: any) => {
      return <Option value={item.id}>{item.scoreName}</Option>
  })}
</Select>

解决办法为:

getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}

官方文档的解释

改变后代码：

<Select
  getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)}//加入这一行
  mode="multiple"
  showSearch
  optionFilterProp="children"
  style={{ width: 600 }}
  placeholder="请选择卡控质检点"
>
  {this.state.zhikongList.map((item: any, index: any) => {
      return <Option value={item.id}>{item.scoreName}</Option>
  })}
</Select>

解决后

滚动不在将下拉框带偏