关于el-select下拉框不跟随页面滚动问题

最新推荐文章于 2023-10-26 09:59:53 发布
最新推荐文章于 2023-10-26 09:59:53 发布
阅读量2.7k 收藏 2
点赞数
文章标签： vue.js css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54882260/article/details/125102837
版权

1.首先对于这个问题，我感觉和电脑的缩放布局有关

我的电脑100%是没有问题的，同事是150%他就出现了下拉框不跟随问题，但又不是所有下拉框都不跟随，改成分辨率100%后这个问题就消失了，这个仅供参考

2.根据百度出来的解决办法在el-select标签加一个:popper-append-to-body="false"，我这出现的问题是下拉框看不见了，通过审查样式，确实有下拉框，嗯，貌似解决下拉框不跟随问题了，但又没有完全解决，只是被样式干掉了，第一个是display:none;第二个是overflow：hidden;（这两个不是在一个元素上啊！分别找到的）当把这两个样式去掉以后，下拉框就出来了，

3.在百度时也看到其他解决办法，比如body元素上的height:1000%去掉，但是对我这个整体样式影响很大

总结：如果出现添加:popper-append-to-body="false"后select下拉框消失问题，百分百是因为样式问题，慢慢排查，多注意display:none和overflow:hidden，因为这个:popper-append-to-body="false"属性的功能是将下拉框插入到body下，极大概率被溢出隐藏掉，

 如果有好的解决办法，各位大神多多赐教，探讨一下

harry的代码之路
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element中关于下拉时位置偏移
nick_zhang的博客
09-13 8828
最近做项目时发现element的好多组件在存在下拉时会产生偏移，例如select，dropdown，datepicker，究其原因主要是发现页面存在滚动条时，会出现偏移的情况。结合源码popper.js，当屏幕变化或者滚动时，会动态计算元素的定位位置信息，实时改变。 <el-select :popper-append-to-body="false" popper-class="popper-select"> <el-option>南京</el-option> <
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。有时是上百条，有时甚至上千条。如果加上后端的多表查询或者数据量过大，这就导致在前端的显示就会及其慢，特别是在网络不好的时候更是如此。 自然，后端就做了一项非常“漂亮”的交互体验数据——分页 这不分页还好，一分页对超过10条数据之后的本来也不多，就20条，偏偏还得做个分页器。（假设为10条） 此时，如果能够像购物商城那样拖拽到底部自动加载新数据就好了。 于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
关于element ui el-select组件滚动条与原生滚动条冲突
ahua2jing的博客
05-12 1179
公司用element ui 搭建一个页面，发现一个bug，el-select组件的股东条会与原生的滚动条发生冲突，当el-select组件的选项过多出现滚动条，会出现滑动el-select组件内内容，但是没有滑动，而是滑动了主页面，而且这种bug没有规律，会让客户体验十分不友好。 我前期的解决思路一直以为我是设置了什么属性导致的，但后来我直接去element官网找到这个组件，发现也有这个问题，后面就换了思路，看到了select的聚焦与失焦方法 于是我在方法中写下如下代码： 当el-selec...
【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题
前端代码小白的日常博客
11-29 3764
popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性，该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中，默认值是 true;当页面滚动的时候，el-select的内容跟随页面移动，不是跟随el-select下面的input进行移动，想要实现的效果如下图。important 为所有样式的最高级，可以通过外联的样式来个更改el-select本身自带的样式。模态框中的el-select下拉框不跟随页面滚动问题。
解决：el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动。
qq_38969618的博客
06-22 5091
el-select下拉框不随滚动条滚动
关于el-select下拉框在弹窗内滚动时脱离问题
最新发布
Momo_dyx的博客
10-26 718
因为el-select的下拉框的z-index位置最高，所以在弹窗滚到一定位置时出现脱离、超出弹窗的问题
【Antd】select 下拉选框不跟随页面滚动
Hermia_yuan的博客
10-09 375
使用 :getPopupContainer="trigger => trigger.parentNode"下拉选框不跟随页面滚动导致与选框分离。
页面滚动时隐藏element-ui下拉框/时间弹框
a736755244的博客
11-04 1695
页面 滚动 隐藏 element-ui 下拉框 时间弹框
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ElementUI的el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动
weixin_45856221的博客
12-06 739
ElementUI的el-select，el-cascader或el-date-picker的下拉框不随滚动条滚动
使用element-ui组件库中el-cascader和el-select组件时，下拉项不随页面滚动走的解决办法
yycnf的博客
02-02 2323
使用element-ui组件库中el-cascader和el-select组件时，下拉项不随页面滚动走的解决办法 1、el-cascader组件，添加:append-to-body="false" <el-cascader v-model="buildForm.companyAddress" :options="areaList" :append-to-body="false" clearable style="width: 100%" &gt
Select 组件或 Dropdown 组件下拉框随页面上下滑动的问题
莫不静好
08-25 1422
背景：当页面数据过多需要滚动时，展开Select组件或Dropdown组件的下拉框后，滚轮页面，下拉框会跟着上下滑动 <a-select v-model="k.propertyContent" :filter-option="filterOptionSelect" show-search ref="entitySel" option-label-prop="label" :getPopupContainer="(triggerNode) => tr.
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
chn4556233的博客
07-19 1321
el-select下拉框不跟随页面滚动/不随滚动条滚动问题/页面滚动时位置错乱, element 下拉选项层级过高问题
element的el-time-select 下拉框位置偏移解决思路
weixin_44416517的博客
11-27 2425
element的el-time-select 下拉框位置偏移的情况，在没有popper-append-to-body属性的情况下的解决思路
element 中添加一个属性就可解决 el-select 和 el-cascader 下拉项 不随页面滚动问题
m0_46862838的博客
06-15 1458
经常会遇到滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定
【element】 el-select 下拉框内容跟随页面滚
rbgg_mp的博客
02-13 1835
element el-select
element dialog对话框中select/cascader 弹窗不跟随问题
不确定因素的博客
05-30 1433
Select 选择器Cascader 级联选择器在这两种组件组合使用是出现了滑动 弹出框不跟随情况，如下出现这种情况原因是因为弹出框相对的位置是body，展示后，如果body不动，所以弹窗位置不会发生改变。
el-select下拉框添加横滚
08-12
根据引用内容和，在el-select标签中设置:popper-append-to-body="false"可以解决el-select下拉框跟随页面滚动的问题。然而，根据引用内容中的描述，这种解决方法会导致下拉框不可见，需要通过修改样式来解决。参考引用内容，可以使用样式穿透来实现添加横滚效果。可以在样式中添加如下代码： .returformSelect .el-select-dropdown { overflow-x: auto !important; } 这样可以实现el-select下拉框的横滚效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题](https://blog.csdn.net/liqiannan8023/article/details/128098896)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [关于el-select下拉框不跟随页面滚动问题](https://blog.csdn.net/m0_54882260/article/details/125102837)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值