vue 中监听并设置scrollTop

最新推荐文章于 2023-09-28 10:46:09 发布

原创最新推荐文章于 2023-09-28 10:46:09 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

js 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

在Vue项目中，由于父子组件或兄弟组件间的数据交互，导致子组件在更新数据后滚动条位置重置为0。问题可能源于使用了element的el-scrollbar组件或全局监听滚动事件。解决方案是将el-scrollbar替换为原生滚动条样式，并改为局部监听滚动事件。在组件销毁时正确移除监听，以保持滚动位置。通过这种方法，成功解决了子组件滚动条位置刷新的问题。

vue 中监听并设置scrollTop

问题描述：

  目前在做一个项目，父子组件以及兄弟组件中数据调用比较频繁。但是鉴于项目没那么大，就没有使用vuex。直接使用了this.$emit来给父级组件传递参数以及触发事件.
  但是，由于业务需求， 我的项目当前子组件修改数据的同时是可以将父级组件中的数据同步修改的。然后，子组件再来获取到父组件传递过来数据。就导致了子组件数据在有滚动条的情况下，更新了最新的数据到父级组件之后。子组件的数据也再次刷新，从而引起我子组件页面的滚动条位置也刷新，scrollTop 也变成 0。
  最终也找到了解决办法！

问题分析情况

可能问题一
子组件使用了element的滚动组件 el-scrollbar
可能问题二（使用了window.addEventListener监听滚动事件），如下

mounted（）{
	window.addEventListener('scroll', () => {
      	this.$nextTick(() => {
      		console.log('监听元素的滚动高度')
    	})
 	}, true)
}

因为项目目前还在做，所以不能把代码都放出来。望理解！
（其中 topsH 为我自己页面监听滚动元素的滚动高度）
在这里插入图片描述
以上就是修改之后的代码。

解决方法:

将el-scrollbar 替换掉！改成原生代码

style="overflow: hidden;overflow-y: scroll;"
将监听事件修改为局部监听

document.getElementById('heightScoll').addEventListener('scroll', () => {
    this.$nextTick(() => {
       this.topsH = this.$refs.scrollDiv.scrollTop
    })
 }, true)

请注意！该监听需要在页面销毁时再次调用

destroyed() {
    document.getElementById('heightScoll').addEventListener('scroll', () => {
      this.$nextTick(() => {
        this.topsH = this.$refs.scrollDiv.scrollTop
      })
    }, true)
  }