Vue:滚动页面到指定位置实现

方法 一

//
先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targetbox.offsetTop; }) }) } //再滑动指定距离 document.body.scrollTop = this.target;

方法 二

this
.$nextTick(() => { this.$refs.DOM.scrollTo(0,200); })
方法  三

document.getElementById("target").scrollIntoView();

避坑指南:

方法1,滑动至的元素不能是display:none,存在兼容问题,亲测在部分ios机子上document.body.scrollTop滑动无效。

方法2,未亲测过,但在this.$nextTick(()里执行滑动,感觉有点麻烦。

方法3,亲测可用,ios和android都可。只是要注意,如果页面有监听scroll事件,scrollIntoView也会触发scroll事件的。

posted @ 2022-06-13 13:39  见贤思“奇”  阅读(1642)  评论(0)    收藏  举报