Vue滚动页面到指定位置的实现及避坑

目录

• Vue滚动页面到指定位置
• 方法1
• 方法2
• 方法3
• 避坑指南
• 滚动页面到一定距离后固定

Vue滚动页面到指定位置

在Vue中，有三种方式可以实现H5页面滑动至指定位置

方法1

//先获取目标位置距离
mounted() {
  this.$nextTick(() => {
     setTimeout(() => {
        let targetbox= document.getElementById('targetbox');
        this.target= targetbox.offsetTop;        
   })
  })
}
//再滑动指定距离
document.body.scrollTop = this.target;

方法2

this.$nextTick(() => {
     this.$refs.DOM.scrollTo(0,200);
})

方法3

document.getElementById("target").scrollIntoView();

避坑指南

方法1，滑动至的元素不能是display:none，存在兼容问题，亲测在部分ios机子上document.body.scrollTop滑动无效。

方法2，未亲测过，但在this.$nextTick(()里执行滑动，感觉有点麻烦。

方法3，亲测可用，ios和android都可。只是要注意，如果页面有监听scroll事件，scrollIntoView也会触发scroll事件的。

滚动页面到一定距离后固定

1.id名为testNavBar的盒子与:class=’{ fixedNavbar: isfixTab }'的盒子可以是包含关系也可以是并列关系

 <div id='testNavBar'></div>
      <div class="container "  :class='{ fixedNavbar: isfixTab  }'>
   </div>

或者

<div id='testNavBar'>
    <div :class='{ fixedNavbar: isfixTab }'>这是导航</div>
</div>

2.fixedNavbar是类名

.fixedNavbar {
      background-color: #f3f3f3;
      position: fixed;
      width: 100%;
      z-index: 2032;
      top: 0;
      left: 0;
      padding-bottom: 10px;
    }

3.isfixTab 是控制是否加类名

 data() {
    return {
      isnavshow: false,
      cateList:[],
      cateInfo:[],
      config_list:{},
      isfixTab:false
    }
  },

4.在mounted中监听页面滚动事件,并调用handleTabFix() 方法

  // 监听页面滚动
    mounted () {
        window.addEventListener('scroll', this.handleTabFix, true)
    },
    //离开当前组件前一定要清除滚动监听，否则进入其他路由会报错
    beforeRouteLeave (to, from, next) {
      window.removeEventListener('scroll', this.handleTabFix, true)
      next()
    },

5.声明一个方法handleTabFix()

 // 先分别获得id为testNavBar的元素距离顶部的距离和页面滚动的距离
        // 比较他们的大小来确定是否添加fixedNavbar样式
    handleTabFix() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('#testNavBar').offsetTop
      scrollTop > offsetTop ? this.isfixTab = true : this.isfixTab = false
    }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。