解决antd下拉框，日历等组件跟随滚动条滚动bug

最新推荐文章于 2024-06-24 17:34:37 发布
最新推荐文章于 2024-06-24 17:34:37 发布
阅读量3.2k 收藏 3
点赞数 1
文章标签： antd bug select 滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43634982/article/details/109307359
版权

Select组件有个API getPopupContainer，Ant Design官方文档给出的用途解释为：“菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位”。同时官网也强调一个特殊情况需要注意：“如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中”。

<Select getPopupContainer={triggerNode => triggerNode.parentNode}></>
IT~少年人
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html使用antd的下拉框控件,看一看antd 中 select/dropdown 等组件的下拉框
weixin_39578899的博客
06-08 2584
背景：在项目中使用 select 组件，点击 select 出现下拉框的状态时，滑动页面下拉框不跟随 select 组件滑动。也就是不固定在 select 组件的下方。于是开始思考：antd 是怎么实现下拉框的？下拉框跟随滚动是怎么做的？先说解决办法吧：查看API文档：getPopupContainer： 菜单(下拉框哈)渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为...
antd 下拉框怎么联动_深入理解Antd-Select组件的用法
weixin_36060333的博客
12-30 2560
一、Antd-Select提供几种类型最基础版只提供下拉功能的选择器带搜索功能的下拉选择器可多选的下拉选择器可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)多级联动下拉选择器搜索远程数据下拉框二、一些潜在用法如果Select.Option选项的数量特别大:2k、3k...假设请求数据时间我们都解决好了,信心满满地准备把数据填充到后下班!过会你会发现有多绝望..这下拉框加载了10s还...
antd 下拉框不跟着滚动走
qq_43691078的博客
06-05 1223
在使用阿里的ant design vue框架时，使用下拉菜单a-select等组件，用在a-model组件上，发现垂直滚动的时候，a-select不会跟着走，停留在原地 a-select这么写可以解决 a-date-picker这么写可以解决 或者手动指定到对应节点上也可以 ...
antd select选择器下拉框跟随滚动条滚动
最新发布
qq_41536505的博客
06-24 166
antd select选择器下拉框、AutoComplete 下拉框跟随滚动条滚动怎么解决？
antd 下拉框不跟随滚轮滚动
qq_43613029的博客
07-20 730
下拉框 默认是相对于 body 定位，用getPopupContainer 设置相对于父级定位 private getPopupContainer() { return (triggerNode: any) => triggerNode.parentNode; } :getPopupContainer="getPopupContainer()" 或者 :getPopupContainer="(triggerNode: any) => triggerNode.parentN.
解决Antd的RangePicker组件在整体页面出现滚动条时，不随弹出框滚动的bug
weixin_38008461的博客
09-07 1293
之前在antd官网和通过网络检索发现好多文章都是写的用getPopupContainer这个API，但是我在RangePicker组件上试了好几种写法都不生效，最后发现getCalendarContainer这个API才是有效的，问题解决了~ 解决办法：在RangePicker组件内加上这句代码就好了： getCalendarContainer={trigger => trigger.parentNode} ...
antd select选择器下拉框跟随滚动条滚动解决方案
张木期的博客
02-10 3553
选择器如下： 滚动条滚动之后： 原本代码 <div class="title">提交方式</div> <a-form-model-item ref="submitType" prop="submitType" class="select-item"> <a-select v-model="form.submitType" > <a-select-option v-for="item in
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
ant-design-vue解决下拉框、日期组件不随父节点滚动问题
qq_55269092的博客
03-22 344
ant-design-vue解决下拉框、日期组件不随父节点滚动问题（vue）
antd 下拉框：根据输入的内容向后台发送请求，并在下拉框中滚动条滚动到底部进行分页
汤迷的博客
02-23 1560
1、说明： ref="clientCode" ， :getPopupContainer="() => $refs.clientCode" 是为了将下拉框加载到固定的容器内，为了后面可以获取到（因为默认的是加载到body中的，如果有多个下拉框的话，就没方法确定获取）， 下拉框节点并进行监听滚动加载 show-search ： 为了可以输入内容进行搜索 :show-arrow="false" ： 隐藏下拉标志 :not-...
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
ant-design Select 选择器 滚动 bug
weixin_46452908的博客
11-21 559
ant-design Select 选择器 滚动 bug
ant-design 关于select下拉框随着滚动条滚动的问题、选择器样式无法修改的问题
BoZai_ya的博客
07-13 4002
使用ant-design存在的问题 下拉框选项跟着滚动条动这个问题 选择器样式修改不生效
antdv 下拉框设置getPopupContainer无效 ，页面滚动还是不跟随页面滚动解决方案
qq_45919348的博客
12-12 2922
设置完getPopupContainer之后，组件还是不会随着页面滚动，因为getPopupContainer设置的是绝对定位absolute，还需要在组件所要依赖的父元素上设置相对定位relative。例如ant d 的popoconfirm 或者Popover 组件，都有一个getPopupContainer参数，可以控制组件的在指定的组件下，getPopupContainer可以有多中写法
antd3版本 select下拉框打开时 滚动页面下拉框漂浮问题
m0_49155480的博客
07-06 1732
#antd3版本 select下拉框打开时 滚动页面下拉框漂浮问题 我们在使用antd3的select时候 打开下拉框 滚动页面 发现下拉框居然跟着屏幕一起滚动。 因为 select 的getPopupContainer 设置默认相对于body 进行定位 被测试发现后就会给我们找bug，非常难受！而且很多小伙伴不知道怎么解决。 当我们在直接使用select不是在子组件中时，我们可以通过设置getPopupContainer来解决问题 triggerNode => triggerNode.paren
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug
F-two的博客
08-25 1436
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug （V4.16.13） <Form.Item label="关联团队" name="team" required> <Select placeholder="请选择已有团队" onChange={(value) => { formRef.current &&
Antd Select、Dropdown等组件下拉框跟随滚动条移动问题
qq_49464155的博客
05-06 1624
可出现问题，高度不够导致menu显示不全
antd select选择器下拉菜单跟随页面滚动
under taker
09-22 254
当页面有滚动条时，选择器的下拉菜单会出现与选择器分离的情况，只要在选择器的标签上加上这一句再刷新下页面就可以了。
【React】解决antd中，select和DatePicker组件不跟随页面滚动的问题
qing_小诺的博客
06-05 5740
解决方案： 1、在Select组件中： 添加“getPopupContainer={triggerNode => triggerNode.parentNode}” ，使其固定在父元素中 <Select getPopupContainer={triggerNode => triggerNode.parentNode} defaultValue="lucy" styl...
react的antd的table组件横向滚动条始终位于可视区域
06-13
要实现antd的table组件横向滚动条始终位于可视区域，可以使用CSS的sticky属性和JavaScript的scroll事件结合实现。 首先，在table组件的外层div上设置position: relative属性，使得其内部的横向滚动条可以相对于该...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值