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

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

摘要生成于 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>

解决后

滚动不在将下拉框带偏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值