vue-waterfall-easy点击跳转后记住滚动位置，防止回到顶部

原创于 2023-09-14 15:21:08 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue前端专栏收录该内容

6 篇文章

订阅专栏

文章介绍了在使用Vue开发中，如何通过在跳转前保存`vue-waterfall-easy-scroll`组件的滚动位置，然后在页面加载后恢复该位置的方法，使用了`activated`生命周期钩子和`nextTick`函数.

其实只要把跳转前的滚动条位置保存下来，返回页面时再赋予就行，代码如下：

//this.scroll = 0
   clickFn(event, { index, value }){//跳转前
	    this.scroll = document.getElementsByClassName("vue-waterfall-easy-scroll")[0].scrollTop;
	    this.$router.push({
	     	...
	      });
		},
   activated() {
    this.$nextTick(() => {
      setTimeout(() => {
        document.getElementsByClassName("vue-waterfall-easy-scroll")[0].scrollTop = this.scroll;
      }, 0);
    });
  },