Vue项目scroll问题记录

Posted 2023-03-20

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

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

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

Android端正解:

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

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

正解：

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

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