Vue滚动页面到指定位置的实现及避坑
作者：KWMax
这篇文章主要介绍了Vue滚动页面到指定位置的实现及避坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。