vue项目记录页面滚动条高度，再次返回该页面时自动滚动到当前高度

最新推荐文章于 2024-04-02 04:39:41 发布

Ccoolor

最新推荐文章于 2024-04-02 04:39:41 发布

阅读量1.1k

点赞数

分类专栏： elementUI js vue

本文链接：https://blog.csdn.net/as965874/article/details/115510234

版权

js 同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

vue

24 篇文章 0 订阅

订阅专栏

elementUI

16 篇文章 1 订阅

订阅专栏

一、离开当前页面之前保存滚动条高度
我的项目页面切换用到了elementUI的tabs组件,所以每次页面切换前都会调用beforeLeaveTab方法，故在该方法中保存离开页面时滚动条的高度。

   beforeLeaveTab(tab, event) {
   //参数tab是要进入的页面的唯一值，event是要离开的页面的唯一值。
         let _this = this

      // 存滚动条位置
      if (_this.$el.querySelector('.tableQh') != null) {
        // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
        let scrollTop = _this.$el.querySelector('.tableQh').scrollTop
        let eventHeight = event + 'height'
        window.sessionStorage.setItem(eventHeight, scrollTop)
        this.event = event
      }
      //取滚动条位置
      if (tab.indexOf('_') != -1) {
        let tabHeight = window.sessionStorage.getItem(tab + 'height')
        this.timer = setTimeout(() => {
          if (tabHeight != null) {
            _this.$el.querySelector('.tableQh').scrollTop = tabHeight
          }
        }, 50)
      }
    },

二、存储离开的页面滚动条高度
离开页面时，获取当前页面的唯一值，作为key值，将当前滚动条高度存储到sessionStorage中

     if (_this.$el.querySelector('.tableQh') != null) {
        let scrollTop = _this.$el.querySelector('.tableQh').scrollTop
        let eventHeight = event + 'height'
        window.sessionStorage.setItem(eventHeight, scrollTop)
        this.event = event
      }

三、获取滚动条高度
当再次返回该页面，读取存起来的页面滚动条高度，将滚动条跳转到该位置。

   beforeLeaveTab(tab, event) {
    //参数tab是要进入的页面的唯一值，event是要离开的页面的唯一值。
         let _this = this
      // 存滚动条位置
      if (_this.$el.querySelector('.tableQh') != null) {
        // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
        let scrollTop = _this.$el.querySelector('.tableQh').scrollTop
        let eventHeight = event + 'height'
        window.sessionStorage.setItem(eventHeight, scrollTop)
        this.event = event
      }
      //取滚动条位置
      if (tab.indexOf('_') != -1) {
        let tabHeight = window.sessionStorage.getItem(tab + 'height')
        this.timer = setTimeout(() => {
          if (tabHeight != null) {
            _this.$el.querySelector('.tableQh').scrollTop = tabHeight
          }
        }, 50)
      }
    },

template内容
动态控制显示哪一个页面，每个页面的类选择器名称都相同。

       <keep-alive>
          <el-row v-if="tabName.indexOf('详情') != -1" class="tableQh">
            <station-detail ref="czDetails"></station-detail>
          </el-row>
        </keep-alive>
        <keep-alive>
          <el-row v-if="tabName.indexOf('详情') != -1" class="tableQh">
            <alternator-detail ref="fdjDetails"></alternator-detail>
          </el-row>
        </keep-alive>