裴大头-秦可爱

裴大头-秦可爱

vue实现页面滑动至指定位置

发表于 2021-03-17
裴大头
阅读量 367
更新于 2021-05-25

在Vue中,有三种方式可以实现页面滑动至指定位置

方法1:

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

方法2:

this.$nextTick(() => {
     this.$refs.DOM.scrollTo(0,200);
     this.$refs.result.scrollIntoView({ behavior: "smooth" });
})
js

方法3:

document.getElementById("target").scrollIntoView();
js
评论
来发一针见血的评论吧!
表情
  • 你帅哥哥

    2021-05-11 17:53

    真的吗?弟弟哥哥来看看你

    0
    回复
    • 裴大头

      男博主

      2021-05-11 17:57

      @你帅哥哥你真是个憨憨😒

      0
      回复
    • 共1条回复,点击查看
  • 天天

    2021-03-18 11:44

    奈斯

    0
    回复
      共0条回复,点击查看
  • 哇呜

    2021-03-18 11:38

    呦吼

    0
    回复
      共0条回复,点击查看
  • 哇呜

    2021-03-18 11:38

    哈哈哈

    0
    回复
      共0条回复,点击查看
推荐文章
  • JavaScript 的事件循环机制

    1点赞1评论

  • Vue项目代码规范

    1点赞1评论

  • Element UI 级联选择器 el-cascader 实现懒加载和搜索功能

    1点赞0评论

  • Java 23种设计模式——单例模式(Singleton)

    0点赞1评论

  • Java 23种设计模式——适配器模式(Adapter)

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 982 天访客 26086

© 2023 Pei你看雪鲁ICP备19037910号-2