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

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

查看更多关于Vue滚动页面到指定位置的实现及避坑的详细内容...