Vue记录滚动条的位置

最新推荐文章于 2024-08-12 15:48:49 发布

Blizzar_front-end

最新推荐文章于 2024-08-12 15:48:49 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51195865/article/details/122419404

版权

首先给占位符加一层缓存

//Home组件为展示界面
<keep-alive include="Home">
      <router-view></router-view>
    </keep-alive>

在路由上加一个源信息meta，记录滚动条的top值

 routes: [
    { path: '/', component: Home, meta: { isRecord: true, top: 0 } },
    ],
     scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: to.meta.top || 0 }
    }
  }

给页面添加事件监听

// 鲁大师 提供了许多牛逼的函数 节流的函数、防抖的函数、操作数组的一系列函数、操作对象的一系列函数（对象的深拷贝、浅拷贝）
import _ from 'lodash'
let fn = null

 created() {
    this.initArticleList()
  },
   activated() {
    fn = this.recordTopHandler()
    //添加滚动的事件监听
    window.addEventListener('scroll', fn)
  },
  deactivated() {
  //移除事件监听
    window.removeEventListener('scroll', fn)
  },
  methods:{
  //fn：记录滚动条的位置
  recordTopHandler() {
  //_.debounce（）防抖
      return _.debounce(
        () => {
          this.$route.meta.top = window.scrollY
        },
        50,
        { trailing: true }
      )
    }
  }