Vue如何滚动页面到指定位置且避免常见问题？

本文共计603个文字，预计阅读时间需要3分钟。

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

目录

• 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     }

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