antd select选择器下拉菜单跟随页面滚动

最新推荐文章于 2024-06-24 17:34:37 发布
最新推荐文章于 2024-06-24 17:34:37 发布
阅读量289 收藏 1
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nana_4/article/details/133162210
版权
文章介绍了如何在页面滚动时，通过在选择器标签上添加`getPopupContainer=triggerNode>triggerNode.parentNode`代码来修复下拉菜单与选择器分离的问题，方法是利用CSS定位解决滚动影响。
摘要由CSDN通过智能技术生成

当页面有滚动条时，选择器的下拉菜单会出现与选择器分离的情况，只要在选择器的标签上加上这一句再刷新下页面就可以了

 :getPopupContainer="(triggerNode) => triggerNode.parentNode"

花烁
关注
html使用antd的下拉框控件,看一看antd 中 select/dropdown 等组件的下拉框
weixin_39578899的博客
06-08 2593
背景：在项目中使用 select 组件，点击 select 出现下拉框的状态时，滑动页面下拉框不跟随 select 组件滑动。也就是不固定在 select 组件的下方。于是开始思考：antd 是怎么实现下拉框的？下拉框跟随滚动是怎么做的？先说解决办法吧：查看API文档：getPopupContainer： 菜单(下拉框哈)渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为...
antd的联级选择器异步调用编辑回显_antd Select下拉菜单动态添加option里的内容操作...
weixin_26899659的博客
01-17 1359
antd Select下拉菜单动态添加option里的内容，通过form表单绑定select选中的值提供一个公共的方法，每次只需去调用这个方法就行了//这里是示例数据格式let giftScope =[{code:200,id:1,name:"张三"}, {code:300,id:2,name:"李四"}, {code:400,id:3,name:"王五"}, {code:500,id:4,nam...
【antd中的select组件，下拉框出现时，滚动页面，如何使下拉框跟随select移动】
m0_47298749的博客
09-23 704
组件移动而不是固定在原始位置上。使用这种方式，当滚动页面时，下拉框会跟随。
antd select选择器下拉框跟随滚动条滚动
最新发布
qq_41536505的博客
06-24 190
antd select选择器下拉框、AutoComplete 下拉框跟随滚动条滚动怎么解决？
Ant Design Vue select 展开页面滚动选项也跟着滚动
qq_45832807的博客
02-21 501
通过getPopupContainer改变浮层渲染父节点。通过开启浮层背景板解决。
ant-design 关于select下拉框随着滚动条滚动的问题、选择器样式无法修改的问题
BoZai_ya的博客
07-13 4033
使用ant-design存在的问题 下拉框选项跟着滚动条动这个问题 选择器样式修改不生效
【Ant Design】下拉组件下拉选项随页面滚动与Select框分离异常
weixin_47483275的博客
09-21 247
只需要加上 :getPopupContainer="(triggerNode) => triggerNode.parentNode"这样与页面滚动的时候就不会出现分离问题了。
antd的 input有下拉_antd Select下拉菜单动态添加option里的内容操作
weixin_30069591的博客
12-29 1522
antd Select下拉菜单动态添加option里的内容，通过form表单绑定select选中的值提供一个公共的方法，每次只需去调用这个方法就行了//这里是示例数据格式let giftScope =[{code:200,id:1,name:"张三"}, {code:300,id:2,name:"李四"}, {code:400,id:3,name:"王五"}, {code:500,id:4,nam...
【Ant Design】下拉列表Select 、日期选择框DatePicker等跟随滚动条上下移动解决方案
爱酸的博文
09-16 1300
属性不会更新，因此组件会随着滚动条上下移动。当滚动条滚动时，初始化计算的。
select 分组下拉菜单自定义样式
06-07
在网页设计中，`select`元素常常用于创建下拉菜单，提供用户选择的选项。然而，浏览器默认的`select`样式通常较为简单，不能满足所有设计需求。本话题将深入探讨如何自定义`select`分组下拉菜单的样式，以实现更美观...
antd 动态添加表单_antd Select下拉菜单动态添加option里的内容操作
weixin_42484898的博客
12-29 4767
antd Select下拉菜单动态添加option里的内容，通过form表单绑定select选中的值提供一个公共的方法，每次只需去调用这个方法就行了//这里是示例数据格式let giftScope =[{code:200,id:1,name:"张三"}, {code:300,id:2,name:"李四"}, {code:400,id:3,name:"王五"}, {code:500,id:4,nam...
react中调用antd的Select下拉框位置随页面滚动
孜然卷的博客
02-14 695
页面滚动后 下拉框也会跟着滚动。滚动不在将下拉框带偏。
antdv 下拉框设置getPopupContainer无效 ，页面滚动还是不跟随页面滚动解决方案
qq_45919348的博客
12-12 3179
设置完getPopupContainer之后，组件还是不会随着页面滚动，因为getPopupContainer设置的是绝对定位absolute，还需要在组件所要依赖的父元素上设置相对定位relative。例如ant d 的popoconfirm 或者Popover 组件，都有一个getPopupContainer参数，可以控制组件的在指定的组件下，getPopupContainer可以有多中写法
antd Modal弹窗中Select下拉框，Input输入历史框等 跟随底层滚动 与输入框分离
WANGHONGP的博客
08-31 1660
antd Modal弹窗中Select下拉框，Input输入历史框等 跟随底层滚动 与表单域分离位置错乱 如果在弹窗中嵌套了包含下拉框的表单，很有可能会遇到滚动时下拉框跟随的不是弹窗这一层，而是底层，会导致位置错乱。 如果是Select，只需要添加一个属性：getPopupContainer={triggerNode => triggerNode.parentNode} <Select getPopupContainer={triggerNode => triggerNode.paren
Antd Select、Dropdown等组件下拉框跟随滚动条移动问题
qq_49464155的博客
05-06 1658
可出现问题，高度不够导致menu显示不全
【React】解决antd中，select和DatePicker组件不跟随页面滚动的问题
qing_小诺的博客
06-05 5760
解决方案： 1、在Select组件中： 添加“getPopupContainer={triggerNode => triggerNode.parentNode}” ，使其固定在父元素中 <Select getPopupContainer={triggerNode => triggerNode.parentNode} defaultValue="lucy" styl...
Vue及Antd组件修改滚动条样式
小龙狗的博客
07-14 3994
Vue及Antd组件修改滚动条样式
vue3+ant-design的select实现下拉框滚动分页加载
qq_41673169的博客
03-19 637
【代码】vue3+ant-design的select实现下拉框滚动分页加载。
antd vue tree-select 控制下拉
06-28
antd vue tree-select 是一款基于 Vue.js 和 Ant Design 的树形下拉选择器组件。它允许用户在一个树形结构中进行选择，并可以控制下拉列表的展示方式。 在使用该组件时，用户可以通过设置 props 来控制树形结构的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值