antdv 下拉框设置getPopupContainer无效 ，页面滚动还是不跟随页面滚动解决方案

最新推荐文章于 2024-05-29 10:08:42 发布
最新推荐文章于 2024-05-29 10:08:42 发布
阅读量2.1k 收藏 13
点赞数 14
分类专栏： 大智慧 文章标签： javascript 前端 开发语言 anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45919348/article/details/134943968
版权

antdv 下拉框设置getPopupContainer无效 ，页面滚动还是不跟随页面滚动解决方案

解决前：在这里插入图片描述

解决后：

在这里插入图片描述

在这里插入图片描述
例如ant d 的popoconfirm 或者Popover 组件，都有一个getPopupContainer参数，可以控制组件的在指定的组件下，
getPopupContainer可以有多中写法，

:getPopupContainer="() => document.getElementById('xxx')" 
//或者官方给的  
:getPopupContainer="triggerNode => triggerNode.parentNode"

但会发现，设置完getPopupContainer之后，组件还是不会随着页面滚动，因为getPopupContainer设置的是绝对定位absolute，还需要在组件所要依赖的父元素上设置相对定位relative
例如本例中：
在这里插入图片描述

请叫我聪明鸭
关注
  • 14
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用antd的Select组件，Cascader组件，DatePicker等下拉选项必须要添加的getPopupContainer（解决选项框随页面滚动分离问题）
Zeng__Yi的博客
10-29 3万+
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 这个属性,看似不重要的属性，却起着重大的作用。 效果图： 当数据比较多的，可以滚动的时候。点击选择框，滑动滚轮 没有添加这个属性的时候： 当没有这个属性的时候 随着滚动 选项会和选择框分离。 当添加这个属性后： 点击后滚动就不会分离 如...
antd-of-vue使用遇到的问题
10-05 451
1、组件下拉框偏移错位，把定位放在父元素上（getPopupContainer） <span className={styles.SeachMargin} id='Select'> <Select style={{ width: 120 }} onChange={handleSelect} allowClear defaultValue="请选择状态" getPopupContainer={()=>document.getElementById('Select')} >
vue Vant的Popup弹出层滚动问题，底部元素fixed定位异常问题
coldriversnow的专栏
12-21 1159
最近开发移动端h5，用的vant 移动端组件库框架，使用popup弹出层时，需要在底部固定一个操作模块。但我发现在popup组件里使用fixed定位后，如果内容没有超出popup高度，底部fixed内容显示正常，否则内容超出出现滚动条后，底部fixed定位元素随页面滚动，fixed失效。效果如下：正常情况和异常情况对比图（左正右异）：解决办法有两种方式。
【开发问题记录】ant design vue 的getPopupContainer
呆呆狗
10-28 2254
的样式，做修改，如果 style 标签上开启了 scoped，肯定不会生效。在 ant design vue 中，有几个组件是有。默认是渲染到body 上的，所以如果你想要对。属性的，比如：下拉菜单。
【Antd】select 下拉选框不跟随页面滚动
Hermia_yuan的博客
10-09 439
使用 :getPopupContainer="trigger => trigger.parentNode"下拉选框不跟随页面滚动导致与选框分离。
Antd中遍历循环多个Popover, getPopupContainer无效
qq_26297923的博客
06-27 2433
因为这几个Popover是遍历循环的，最开始因为当前节点找不到父级节点，导致出现getTooltipContainer不生效，后面查看css原来是定位失效。 解决办法： 找到Popover最近的父级节点，添加position: relative; 完美解决这个问题~~...
antd：ConfigProvider+getPopupContainer解决筛选框遮挡问题（及其他浮层问题）
Erya Programming learning
11-23 6212
ConfigProvider+getPopupContainer解决筛选框遮挡问题（及其他浮层问题）
vue3+antvue getPopupContainer
偷喝汽水的博客
12-08 1239
antvue getPopupContainer
wincc7.4 sp1滚动条和全局库不显示的解决办法.docx
05-06
wincc7.4 sp1滚动条和全局库不显示的解决办法
js判断滚动条是否已到页面最底部或顶部实例
03-16
主要介绍了js判断滚动条是否已到页面最底部或顶部的原理与方法,以实例的形式详细分析了js实现返回顶部功能所涉及的各种技巧,并对相关知识点进行了总结归纳,需要的朋友可以参考下
为select下拉框添加滚动条
10-18
当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加...
JavaScript实现单击下拉框选择直接跳转页面的方法
10-23
主要介绍了JavaScript实现单击下拉框选择直接跳转页面的方法,涉及javascript控制页面跳转的相关技巧,需要的朋友可以参考下
BootStrap下拉框在firefox浏览器界面不友好的解决方案
01-19
以上这个链接在firefix浏览器打开就会发现里面有个小容器，而且下拉按钮样式很不友好 上谷歌查了一下 1.小容器可以利用select:padding:0 2.下拉图标可以利用background-image；-moz-appearance:none把下拉框的...
antd select选择器下拉菜单跟随页面滚动
under taker
09-22 196
当页面有滚动条时，选择器的下拉菜单会出现与选择器分离的情况，只要在选择器的标签上加上这一句再刷新下页面就可以了。
Antd Select、Dropdown等组件下拉框跟随滚动条移动问题
qq_49464155的博客
05-06 1544
可出现问题，高度不够导致menu显示不全
【React】解决antd中，select和DatePicker组件不跟随页面滚动的问题
qing_小诺的博客
06-05 5693
解决方案： 1、在Select组件中： 添加“getPopupContainer={triggerNode => triggerNode.parentNode}” ，使其固定在父元素中 <Select getPopupContainer={triggerNode => triggerNode.parentNode} defaultValue="lucy" styl...
【Ant Design】下拉组件下拉选项随页面滚动与Select框分离异常
weixin_47483275的博客
09-21 174
只需要加上 :getPopupContainer="(triggerNode) => triggerNode.parentNode"这样与页面滚动的时候就不会出现分离问题了。
antd 的 Select组件的下拉框随页面滚动分离断层
小刘的日常bug记录
06-08 276
鼠标滚动页面，下拉框根据页面滚动而滚动从而导致断层。
Vue3 - 实现一个雨水滴落的动画效果
最新发布
良月柒
05-29 140
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
elementui Cascader 和 Select 当页面滚动时，下拉框不一起跟着滚动的问题
05-30
当使用ElementUI的Cascader和Select组件时，如果页面滚动时下拉框没有跟着滚动，可以通过为它们的下拉框添加一个父元素，并将该父元素的高度设置为固定值，从而解决这个问题。 例如，在Cascader组件中，您可以将下拉框的父元素设置为一个div，并将其高度设置为固定的值，如下所示： ```html <div style="height: 300px; overflow: auto;"> <el-cascader :options="options" v-model="selectedOptions" ></el-cascader> </div> ``` 在上面的示例中，我们将Cascader组件的下拉框放在了一个高度为300px的div中，并且将该div的`overflow`属性设置为`auto`，以便在下拉框中显示滚动条。这样，当页面滚动时，div会跟着滚动，从而使下拉框也会跟着滚动。 同样地，在Select组件中，您也可以使用类似的方法来解决这个问题。例如： ```html <div style="height: 300px; overflow: auto;"> <el-select v-model="selectedOption" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </div> ``` 在上面的示例中，我们将Select组件的下拉框放在了一个高度为300px的div中，并且将该div的`overflow`属性设置为`auto`，以便在下拉框中显示滚动条。这样，当页面滚动时，div会跟着滚动，从而使下拉框也会跟着滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值