element的弹窗滚动条重置问题

最新推荐文章于 2025-06-25 14:16:58 发布

转载最新推荐文章于 2025-06-25 14:16:58 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000021621613

文章标签：

#elementui

vue技术项目相关文章专栏收录该内容

14 篇文章

订阅专栏

本文介绍了解决Element UI框架中弹窗组件滚动条位置无法重置的问题。通过设置特定属性，确保弹窗再次打开时滚动条回到顶部，提供更好的用户体验。

element的弹窗滚动条重置问题

弹窗出现滚动条的时候滚动到最底下，
下次在点开的时候还在最底下，可以通过以下方式解决

<el-dialog
    :title="formTitle"
    :visible.sync="dialogFormVisible"
    :lock-scroll="false"  //主要是这个属性
    :append-to-body="true"   //跟这个属性
    :close-on-click-modal="false"
    width="1000px"
></el-dialog>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

抠脚小弟

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

关于浏览器（三） js 滚动条回到起始位置方法可把内容滚动到指定的坐标。

jieweiwujie的博客

01-24

1905

scrollTo0() { let bodyWrapper = document.getElementsByClassName( "el-table__body-wrapper" ); if (bodyWrapper && bodyWrapper.length > 0) { for (let item of bodyWrapper) { item.scrollTo(0, 0); ...

Vue 对话框 Dialog 重新打开后数据重置/清空遗留问题

低调，谦虚，自律，反思，成长！

06-28

5415

在使用 vue+element 开发 Dialog 对话框的时候，点击一个按钮后，显示对话框，对话框填写数据使用下拉菜单展示并选择内容后，关闭模态框；再次打开对话框仍显示上次选中的数据分析原因

参与评论您还未登录，请先登录后发表或查看评论

elementUI踩坑之关于dialog弹框

Livvvvv_的博客

08-10

3234

** dialog组件的属性–lock-scroll ** elementUI官方解释先描述下页面：pc端一个很长的关于作品评选投票的页面，根据页面滚动距离进行分页按需加载，列表中的对象支持投票或取消投票。描述功能：1.若当前作品支持投票，可点击投票按钮，点击后会出现一个弹框，内容显示可投票数，点击确定后掉投票接口，进行投票，成功后弹框关闭；需要刷新列表并且页面仍需显示至投票前的位置。 2.当前作品若已被投票，按钮则为取消投票按钮，点击按钮后直接发送请求，成功后直接刷新页面，也需要显示投票前的位置。

重写Element-UI Dialog滚动条样式

Tian丶Yuting

04-27

866

重写Element-UI滚动条样式

vue3滚动条重置

lyna的博客

04-16

1357

由于单页面应用的原理，使用vue搭建的项目在路由切换时并不会刷新整个页面。因此在有滚动条的页面会存在滚动条不能自动重置的问题。在最近的项目中就遇到了这种问题，因此记录一下。// 由于路由设置了0.3s过渡效果，所以此处设置了0.3s定时器。避免页面切换效果突兀。

vue 监听某个div垂直滚动条下拉到底部的方法

10-18

因此，需要特别注意在模态窗口的生命周期钩子中添加对滚动位置的管理，比如在模态窗口关闭时重置滚动条位置，即`el.scrollTop = 0`。值得一提的是，对于Vue项目，官方推荐使用虚拟滚动（v-for配合key属性和Vue的...

element UI中一个对话框的滚动条怎么能保证每次打开弹窗时都在开头部分

08-27

Element UI 的 `el-dialog` 组件在打开时，默认不会自动将滚动条重置到顶部，这可能导致用户在多次打开弹窗时看到的是上一次关闭时的滚动位置。为了解决这个问题，可以通过 Vue 的生命周期钩子和 DOM 操作实现每次...

element-ui关闭弹窗后会调用哪个方法

最新发布

11-12

关闭后恢复页面滚动条或父组件状态。 4. **嵌套弹窗清理** 解决多层弹窗状态混乱问题（参考引用[4]中的状态管理问题）[^4]。 --- ### 相关问题 1. **如何在 `before-close` 中异步阻止弹窗关闭？** ```...

vue设置table滚动条位置

08-12

`vxe-table` 提供了更完善的 API 支持，例如 `clearScroll()` 方法可以帮助重置滚动位置，适合在数据更新后重新定位滚动条。 - **滚动到底部**： ```javascript that.$refs.xTable.clearScroll().then(() => { ...

el-select加el-tree回显滚动条位置

01-22

当在 Vue Element-UI 中使用 `el-select` 和 `el-tree` 的组合来创建一个带有树状选项的下拉列表时，可能会遇到一个问题：即当选定某个节点并关闭弹窗后再重新打开时，滚动条会回到初始位置而不是保持之前的位置。...

element el-dialog 滚动条问题

m0_68716504的博客

09-02

1642

elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因，查了一下资料发现有两种解决办法。

ElementPlus在Keepalive的Table滚动条无法复原

weixin_40812374的博客

06-21

651

我的vue3+typescript+elementPlus我发现一个很奇怪的现象,就是我在Keepalive的页面里面使用el-table和虚拟的表格,在重复的跳转,表格会重置,但是表格里面的滚动条无法重置,我感觉是个bug,至少在elementUi里面是都会重置的,也有可能是我写的方式不对,我记录了离开页面的滚动条xy的位置,然后进入的时候重置。

解决使用el-dialog,切换tab页标签时滚动条还原到了最顶端

Lella的博客

05-30

773

el-dialog里面内容比较多，每次用户滚动中间查看某个数据，切了其他tab页再回来的时候滚动条又回到了最顶端，给操作带来不便，故对代码进行了更改每次切完tab标签，el-dialog滚动条位置保持不变，因为项目中使用比较多，故写了公共方法。

vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置

NICKDL的博客

07-07

1310

【代码】vue3项目使用element plus 中的el-scrollbar跳转页面后滚动条还是上个页面的位置。

vue3 记录页面滚动条的位置，并在切换路由时存储或者取消

lzfengquan的博客

04-01

2340

需求，当页面内容超出了浏览器可是屏幕的高度时，页面会出现滚动条。当我们滚动到某个位置时，操作了其他事件或者跳转了路由，再次回来时，希望还在当时滚动的位置。那我们就进行一下操作。利用 @scroll=“handleScroll” 事件进行操, 定义的ref 获取dom。4.路由守卫 beforeRouteLeave路由离开前记录当前的位置。我这里获取的是元素本身的滚动条事件，可不是 window的滚动条事件。注意我们需要给元素的最外层父级元素设置。3.每次进入都要将存储的位置重新赋值给页面。

elementPlus关闭弹窗，页面原先滚动条消失

Stephy_Yy

03-09

1076

一开始以为是弹窗内容超过一屏引起，改为一屏内也不能解决。打开控制台，发现弹窗后自动给body标签加上了类el-popup-parent–hidden，关闭后也没去除，因此手动删除该类。 document.getElementsByTagName('body')[0].className = ''; ...

解决element-ui中的el-table中列更新问题以及滚动条会重置到最顶部的问题

Wang__dream的博客

12-19

8706

解决elementui中el-table列行或列数据更新的问题，例如滚动条会重置到最顶部

element-plus中el-dialog对话框关闭页面之后再打开弹框滚动条回到顶部

m0_52611940的博客

06-25

256

element-plus中el-dialog对话框关闭页面之后再打开弹框滚动条回到顶部

vue控制滚动条位置 document.body.scrollTop=0 document.documentElement.scrollTop=0 各种表达式都是0 解决方案

zdreamLife的博客

04-25

1038

查阅了网上各种原因，都是什么浏览器版本之类的问题，反正我试了都不行。 document.body.scrollTop=0 document.documentElement.scrollTop=0 各种生命周期中试了没用反正取到的值都是0 也不变化！尝试了快要秃头的时候我想了一下，可能这个scrollTop不在body不在document层级。我说一下我的解决思路这个展现的是已经包含的，如果获去的是这个元素的父级元素的scrollTop 可能就是0，这个结论不敢确定，可能跟封装的框架有关。未详细研究。