vue点击列表查看详情后返回列表历史滚动位置

301 阅读1分钟

在我们的列表页面点击查看详情页后,返回会回到最顶部,这对用户体验的感觉不好。我们需要返回上一页的历史滚动位置。

第一种情况 如果是某个div元素里面的滚动(该方法需要将列表页用keep-alive标签包裹)

//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.querySelector("#wrap").scrollTop
    next()
},
// 页面通过keep-alive标签包裹
activated() {
    this.$nextTick(() => {
      let target = document.getElementById('wrap');
      target.scrollTop = this.scrollTop
    })
},

第二种情况 如果是body滚动

//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
},
// 在页面进入是将列表滚动到历史位置
beforeRouteEnter (to, from, next) {
    next(vm => {
        document.body.scrollTop = vm.scrollTop
    })
},