element-ui对话框组件Dialog在回调事件opened获取组件滚动条scrollTop的问题

时间:2023-03-09 21:46:15
element-ui对话框组件Dialog在回调事件opened获取组件滚动条scrollTop的问题

今天使用element中的Dialog组件时发现一个问题:当Dialog内容过多时会出现滚动条,而当你滚动到一定位置后关闭Dialog,然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部。

  通常遇到这样的问题解决方法就是在某个钩子事件中将组件的scrollTop值重新设为0,在element2.4.8的文档中,Dialog组件提供的事件一共有四个:open、opened、close、closed,我的想法是在opened事件中等到组件渲染完后将组件的scrollTop值设为0,当时调试发现opened事件怎么也没触发到,后来发现自己用的element版本是2.4.7,更新版本后问题解决,下面是关键代码:

  element-ui对话框组件Dialog在回调事件opened获取组件滚动条scrollTop的问题

  element-ui对话框组件Dialog在回调事件opened获取组件滚动条scrollTop的问题

  不过这种方法也有个体验不好的地方,就是打开对话框后明显有个滚动条回退到顶部的效果,感觉页面会抖一下,在对话框方面element没有bootstrap做的好,各位如果有更好的解决方法欢迎在评论区分享一下