Vue实现返回记住滚动位置

小蓝 • 2024-12-30 16:08 • 编程

一、为什么需要返回记住滚动位置

在进行网页滚动的时候，如果用户返回上一页，会发现页面又回到了最上面，需要重新滚动到之前的位置，体验非常不好。因此，我们就需要返回上一页时，能够记住之前的滚动位置。

二、如何实现返回记住滚动位置

Vue提供了一个非常好用的指令v-scroll，可以监控元素的滚动事件。我们只需要在返回上一页的时候，将之前的滚动位置传给下一页，再利用v-scroll指令来进行滚动，就能够实现返回记住滚动位置的功能。


// 上一页
<a :href="previousUrl" target="_self" @click="storeScrollPosition">返回上一页</a>

// 下一页
<div v-scroll="scrollPosition">...</div>

export default {
  data() {
    return {
      scrollPosition: 0
    };
  },
  methods: {
    storeScrollPosition() {
      this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    }
  }
}

三、解析实现代码

我们使用了v-scroll指令来监控元素的滚动事件。具体来说，我们将滚动位置存储在scrollPosition变量中，然后在下一页中，使用v-scroll指令来进行滚动。


<div v-scroll="scrollPosition">...</div>

export default {
  data() {
    return {
      scrollPosition: 0
    };
  }
}

我们在下一页的div中绑定了v-scroll指令，将之前的滚动位置传递给scrollPosition变量。这样，当用户返回之前的页面时，scrollPosition的值就被保留下来。

在上一页中，我们将scrollPosition的值传递给下一页。


<a :href="previousUrl" target="_self" @click="storeScrollPosition">返回上一页</a>

export default {
  methods: {
    storeScrollPosition() {
      this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    }
  }
}

我们在上一页的a标签中，绑定了storeScrollPosition方法，将当前滚动位置存储在scrollPosition变量中。然后，我们在query或params中将这个变量传递给下一页，这样下一页就能够使用它。

四、实现效果演示

我们可以使用如下代码来展示实现效果：


// 上一页
<a :href="previousUrl" target="_self" @click="storeScrollPosition">返回上一页</a>

// 下一页
<div v-scroll="scrollPosition">...</div>

export default {
  data() {
    return {
      scrollPosition: 0
    };
  },
  methods: {
    storeScrollPosition() {
      this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    }
  }
}

执行上面的代码，然后在上一页中滚动一段距离并返回下一页，就会看到滚动位置被记住了。

五、总结

Vue提供了非常好用的v-scroll指令，可以实现返回记住滚动位置的功能。我们只需要将滚动位置存储在一个变量中，在下一页中再使用v-scroll指令进行滚动即可。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301383.html