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

最新推荐文章于 2024-04-23 15:11:05 发布

异世城

最新推荐文章于 2024-04-23 15:11:05 发布

阅读量1.5w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue JS 文章标签： vue.js javascript

原文链接：https://www.i4k.xyz/article/yaojie5519/104503278

JS 同时被 2 个专栏收录

23 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了在Vue框架中实现H5页面滑动至指定位置的三种方法，并提供了每种方法的具体实现代码。同时，针对不同方法的适用场景及可能遇到的问题进行了详细说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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事件的。