Vue 返回记住滚动条位置详解

最近用 Vue 作移动端页面遇到一个问题，从列表页进入详情页，再返回到列表页，无论以前滚动到哪里，每次返回时都跳到列表最顶部。

这样体验确定很差，指望的应该是记住滚动条的位置，每次返回仍是在原来的位置上，便于继续浏览。

因而在网上搜解决方法，搜了一大圈看了 n 篇文章，都没有说清楚。起码我是没有经过看一篇文章而完美解决，因此决定写一篇详细的亲测可行的解决方案。

一共分三步：

• 给 router-view 添加 keep-alive
• 获取并存储当前 scrollTop
• 返回时取出并设置 scrollTop

100 多位经验丰富的开发者参与，在 Github 上得到了 1000+ 个 star 的全栈全平台开源项目想了解或参与吗？
项目地址：https://github.com/cachecats/coderiver

1、给 router-view 添加 keep-alive

先贴出 keep-alive 官方文档，不熟悉的能够先看看文档。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。因此在由详情页返回列表页时，不让列表页刷新。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

设置 scrollTop 时是在 activated 方法里，有些文章说获取 scrollTop 在 deactivated 方法里，但通过测试，在 deactivated 方法里并不能准确的获取 scrollTop 值，每次都是 0。具体缘由暂时不深究，先解决问题。因此把获取 scrollTop 值放在 item 的点击事件函数里执行。

2、获取并存储当前 scrollTop

页面布局以下：

整个页面是一个 <rounter-view> ，下面又分了两个 tab，咱们列表页是一个组件，位于 title 和 导航栏之间的区域。

布局代码：

<div class="wrapper" ref="wrapper">
    <div class="title">我是标题</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
      <van-list
          ref="list"
          class="list"
          v-model="loadingMore"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoadMore"
      >
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item">
          <div class="item">{{item}}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
复制代码

用到了 Vant-ui 的下拉刷新和上拉加载更多组件。

能够看到我一共给了四个 ref ，分别是最外层的 ref="list" ，下拉刷新组件 van-pull-refresh 的 ref="pullRefresh"，列表组件 van-list 的 ref="list"，和每一个 item 的 ref="item"。

为何给出这么多呢？由于这里有个大坑，也是我一直卡住的地方。

咱们知道获取滚动位置是用 scrollTop 这个属性，下面咱们就依次打印出这几个元素的 scrollTop 。

clickItem(item) {
    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;

    console.log('wrapperScrollTop', wrapperScrollTop);
    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
    console.log('listScrollTop', listScrollTop);
    console.log('itemScrollTop', itemScrollTop);

    this.$router.push({name: "detail", params: {data: item}})
},
复制代码

放到 item 的点击事件里触发。获得的日志以下：

WTF？只有第一个 wrapperScrollTop 有值，其余的都 undefined ！

我也不知道为啥，以前一直是获取后三者的 scrollTop ，一直获取不到，纠结了很久。为何其余三个获取不到我如今还没整明白，知道缘由的大佬能够指点一下。

知道了该获取哪个元素的 scrollTop 就简单了，获得值只需存储起来便可。

由于使用了 keep-alive，页面被缓存起来了，因此 data 里的数据不会丢失，能够在 data 中声明一个变量 scroll 存储 scrollTop 的值。也可使用 Vuex。

修改下 clickItem(item) 的代码，将 scrollTop 的值存储起来。

clickItem(item) {
    let wrapperScrollTop = this.$refs.wrapper.scrollTop;
    let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
    let listScrollTop = this.$refs.list.scrollTop;
    let itemScrollTop = this.$refs.item.scrollTop;

    console.log('wrapperScrollTop', wrapperScrollTop);
    console.log('pullRefreshScrollTop', pullRefreshScrollTop);
    console.log('listScrollTop', listScrollTop);
    console.log('itemScrollTop', itemScrollTop);
    
	//存储 scrollTop 的值
    this.scroll = wrapperScrollTop;
   
    this.$router.push({name: "detail", params: {data: item}})
},
复制代码

3、返回时取出并设置 scrollTop

上面已经介绍过了，使用 keep-alive 以后，每次返回页面会调用 activated 生命周期方法，因此在这个方法里设置以前记住的 scrollTop，达到记住滚动位置的效果。

代码很简单，只有一句话：

activated() {
	this.$refs.wrapper.scrollTop = this.scroll
}
复制代码

完整的代码以下：

<template>
  <div class="wrapper" ref="wrapper">
    <div class="title">我是标题</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh" ref="pullRefresh">
      <van-list
          ref="list"
          class="list"
          v-model="loadingMore"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoadMore"
      >
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)" ref="item">
          <div class="item">{{item}}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>

  export default {


    components: {},
    created() {

    },
    mounted() {
      for (let i = 0; i < 15; i++) {
        this.list.push(i)
      }
    },
    data() {
      return {
        list: [], //列表数据
        loadingMore: false,  //加载更可能是否显示加载中
        finished: false, //加载是否已经没有更多数据
        isRefresh: false, //是否下拉刷新
        scroll: 0,
      }

    },

    activated() {
      this.$refs.wrapper.scrollTop = this.scroll
    },

    deactivated() {

    },
    methods: {

      clickItem(item) {
        let wrapperScrollTop = this.$refs.wrapper.scrollTop;
        let pullRefreshScrollTop = this.$refs.pullRefresh.scrollTop;
        let listScrollTop = this.$refs.list.scrollTop;
        let itemScrollTop = this.$refs.item.scrollTop;

        console.log('wrapperScrollTop', wrapperScrollTop);
        console.log('pullRefreshScrollTop', pullRefreshScrollTop);
        console.log('listScrollTop', listScrollTop);
        console.log('itemScrollTop', itemScrollTop);

        this.scroll = wrapperScrollTop;
        this.$router.push({name: "detail", params: {data: item}})
      },

      onRefresh() {
        this.list = [];
        this.finished = false;
        setTimeout(() => {
          for (let i = 0; i < 15; i++) {
            this.list.push(i)
          }
          this.isRefresh = false
        }, 2000)
      },

      //加载更多
      onLoadMore() {
        console.log('load more')
        let newList = [];
        for (let i = this.list.length; i < this.list.length + 15; i++) {
          newList.push(i)
        }
        this.list = this.list.concat(newList)
        this.loadingMore = false;
        if (this.list.length > 50) {
          this.finished = true
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../public/css/index";

  .wrapper {
    width: 100%;
    height: calc(100vh - 100px);
    overflow-x: hidden;
    box-sizing: border-box;
    margin-bottom: px2rem(50);
    .title{
      font-size: px2rem(20);
      padding: px2rem(10);
    }
    .list {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      .item-wrapper {
        display: flex;
        flex-direction: column;
        font-size: px2rem(16);
        margin: px2rem(8);
        padding: px2rem(8);
        background-color: white;
        .item {
          font-size: px2rem(16);
          padding: px2rem(10);
        }
      }
    }
  }
</style>
复制代码

好了，以上就是 Vue 返回记住滚动条位置的详解。

---

全栈全平台开源项目 CodeRiver

CodeRiver 是一个免费的项目协做平台，愿景是打通 IT 产业上下游，不管你是产品经理、设计师、程序员或是测试，仍是其余行业人员，只要有好的创意、想法，均可以来 CodeRiver 免费发布项目，召集志同道合的队友一块儿将梦想变为现实！

CodeRiver 自己仍是一个大型开源项目，致力于打造全栈全平台企业级精品开源项目。涵盖了 React、Vue、Angular、小程序、ReactNative、Android、Flutter、Java、Node 等几乎全部主流技术栈，主打代码质量。

目前已经有近 100 名优秀开发者参与，github 上的 star 数量将近 1000 个。每一个技术栈都有多位经验丰富的大佬坐镇，更有两位架构师指导项目架构。不管你想学什么语言处于什么技术水平，相信都能在这里学有所获。

经过 高质量源码 + 博客 + 视频，帮助每一位开发者快速成长。

项目地址：https://github.com/cachecats/coderiver

---

您的鼓励是咱们前行最大的动力，欢迎点赞，欢迎送小星星✨ ~