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 }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue零基础入门之模板语法与数据绑定及Object.defineProperty方法详解
这篇文章主要介绍了Vue初学基础中的模板语法、数据绑定、Object.defineProperty方法等基础,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-09-09ElementUI中的el-dropdown传入多参数的实现方法
本文主要介绍了ElementUI中的el-dropdown传入多参数的实现方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-12-12
最新评论