美文网首页
Vue项目scroll问题记录

Vue项目scroll问题记录

作者: 如沙雨下 | 来源:发表于2018-11-27 11:42 被阅读38次

    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

    相关文章

      网友评论

          本文标题:Vue项目scroll问题记录

          本文链接:https://www.haomeiwen.com/subject/nbqgqqtx.html