vue纪录页面滚动位置

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存对应位置