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
网友评论