文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中如何实现锚点定位平滑滚动

2024-04-02 19:55

关注

vue锚点定位平滑滚动

下面是简单的代码,拿来即用

html 

//给div盒子设定单击事件和ref名
<div @click="getThere" ref="cat_box">点击滑动到此位置</div>
methods: {
 getThere() {
      // 通过ref名获取元素在页面中的位置并滚动至此
      this.$el.querySelector(".cat_box")
      .scrollIntoView({ block: "start", behavior: "smooth" });  
    },
}

vue点击tabs平滑滚动(锚点事件)

避免切换速度过快显得突兀,在不使用 a 标签以及添加 class类 进行锚点操作时,这时候就可以用到 dom 方法 scrollTo 来实现平滑滚动。

定义

scrollTo(xpos,ypos),包含两个必须属性

使用:

// 滚动到指定位置window.scrollTo(100,500)

scrollTo(options),包含三个必须属性

使用:

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

兼容

适用于pc端和移动端,scrollTo(options)属性不兼容 IE

在这里插入图片描述

使用

// vue中使用
// 
<div
   class="tabs"
   v-for="(item, index) in titAll"
   :key="index"
   :class="{ actives: isactive === index }"
   @click="tabsColor(index)"
>
     {{ item }}
</div>
// 分类tit
<div>
  <div class="item" id="tabs0">资产账户</div>
  // <div>分类内容</div>
  <div class="item" id="tabs1">信贷服务</div>
  // <div>分类内容</div>
  <div class="item" id="tabs2">金融服务</div>
  // <div>分类内容</div>
</div>
 data() {
   return {
     titAll: ["资产账户", "信贷金融", "经融服务"],
     //初始选中
     isactive: 0,
   };
 },
 methods: {
  tabsColor(index) {
  	// 切换选中样式
    this.isactive = index;
    // 获取对应iddom
    const tabsId = document.querySelector(`#tabs${index}`);
    // 判断进行平滑滚动
    if (tabsId) {
      window.scrollTo({
        top: tabsId.offsetTop,
        behavior: "smooth",
      });
    }
  },
},

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯