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

目录Vue滚动页面到指定位置方法1方法2方法3避坑指南滚动页面到一定距离后固定Vue滚动页面到指定位置在Vue中，有三种方式可以实现H5页面滑动至指定位置方法1//先获取目标位置距离mounted()...

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.handlphpeTabFix, 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
  }}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

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

目录