Vue项目scroll问题记录

1. scrollTop移动端失效问题

项目中有个需求，左右切换列表时滚动条滚到开始位置，用Chrome开发调试时是这么写的：

document.documentElement.scrollTop = 0

在pc和moblie模式下scrollTop 功能都是正常的，但是用Android真机测失效了

之后尝试了以下几种方案都是无效的：

window.scrollTop=0

window.pageYOffset=0
    
document.getElementsByClassName('swiper-slide')[0].scrollTop = 0

Android端正解:

document.body.scrollTop = 0

2. vue 监听滚动事件无效问题

vue项目中需要监听页面滚动是这么写的：

  mounted () {
      window.addEventListener('scroll', this.handleScroll)
  }
  methods: {
      handleScroll () {
            ...
      }
  }

但是当需要监听的是某个div时，直接把window替换为document.getElementById('right-time-line')并不会生效，
尝试了@scroll=handleScroll和@scroll.native=handleScroll，都不生效
怀疑是Dom渲染的问题放到$nextTick里去绑定监听，依旧不生效

正解：

  mounted () {
      document.getElementById('right-time-line').addEventListener('scroll', this.handleScroll,true)
  }

备注：vue -V
2.9.3
后续有空查下原因

3. scrollTop注意事项

控制内部可滚动div的滚动位置时需要设置该div内部元素的scrollTop值，元素的scrollTop值是相对于父元素的，如果父元素不可滚动则scrollTop值始终为0