vue纪录页面滚动位置

最新推荐文章于 2025-02-22 18:57:52 发布

qq602285510

最新推荐文章于 2025-02-22 18:57:52 发布

阅读量796

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42734433/article/details/95995057

博客介绍了在Vue中实现页面滚动位置保存的方法。包括给滚动盒子添加样式解决苹果下滚动不流畅问题，添加滚动事件和引用，在method里对应生命周期。还提到因公司项目无法开启history模式，只能采用此方式，若滚动循环组件，可传入index并以数组存滚动距离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.页面keepAlive

2.滚动的盒子加上overflow:scroll

和-webkit-overflow-scrolling: touch;（解决苹果下不流畅）

3.盒子添加事件@scroll="contentScroll" 加上引用ref

4.method里

contentScroll (e) {
  let target = e.target || e.srcElement
  this.scrollTop = target.scrollTop
  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 3) {
    this.loadArticlesByTypeAndId()
  }
},

对应生命周期

activated () {
  this.scrollTop = sessionStorage.getItem('scrollTop')
  this.$refs.list.scrollTo(0, this.scrollTop)
},
deactivated () {
  sessionStorage.setItem('scrollTop', this.scrollTop)
},

另外，vue路由貌似可以纪录位置，但是要开启history模式，公司项目已根深蒂固没法改了，只能用这种方式实现

如果滚动的是循环出来的组件

将index传入组件

滚动距离用数组存，index存对应位置