vue3 锚点定位 点击滚动高亮

news2024/9/29 11:37:42

功能描述

点击导航跳到对应模块的起始位置，并且高亮点击的导航；
滚动到相应的模块时，对应的导航也自动高亮；

效果展示

在这里插入图片描述

注意事项

  1. 一定要明确哪个是要滚动的盒子；
  2. 滚动的高度要减去导航栏的高度；
  3. 当前在导航1，点击导航4时，会出现导航2、导航3和导航4依次高亮的现象，定义变量判断当前为点击时不监听滚动事件即可；
    isScroll.value = false

核心代码

onMounted(() => {
  nextTick(() => {
  	// 监听滚动的盒子的滚动事件
    document.getElementById('scrollBox').addEventListener("scroll", onScroll);
  })
})

onBeforeUnmount(() => {
  document.getElementById('scrollBox').removeEventListener('scroll', onScroll)
})


const scrollToAnchor = (id, index) => {
 activeIndex.value = index
  var anchor = document.getElementById(id);
  var scrollBox = document.getElementById('scrollBox')
  nextTick(() => {
    scrollBox.scrollTo({
      top: anchor.offsetTop - 30,
      behavior: 'smooth'
    });
 })
  isScroll.value = false
   // 点击时暂停页面的滚动监听事件，防止点击时导航高亮出现走马灯效果；
  // 此处的定时器存在缺陷，点击完2秒之内滚动还是会偶现走马灯现象；
  let timeId = '';
  clearTimeout(timeId);
  timeId = setTimeout(() => {
    isScroll.value = true;
  }, 2000);
};


// 滚动监听器
const onScroll = ()=> {
  if(!isScroll.value) return
  // 获取所有锚点元素
  const navContents = document.querySelectorAll('.container .section')
  // 所有锚点元素的 offsetTop
  const offsetTopArr = []
  navContents.forEach(item => {
    offsetTopArr.push(item.offsetTop-30)
  })
  // 获取当前文档流的 scrollTop
  const scrollTop = document.getElementById('scrollBox').scrollTop
  // 定义当前点亮的导航下标
  let navIndex = 1
  for (let n = 1; n <= offsetTopArr.length; n++) {
    // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
    // 那么此时导航索引就应该是 n 了
    if (scrollTop >= offsetTopArr[n-1]) {
      navIndex = n
    }
  }
  // 把下标赋值给 vue 的 data
  activeIndex.value = navIndex
}

完整代码

<template>
  <div class="box" id="scrollBox" v-loading="loading">
    <div class="fixed-box">
      <div v-for="(i) in defaultTabs" :class="{active_anchor: activeIndex === i}">
          <a @click="scrollToAnchor(`section${i}`, i)">
            <span v-if="i == 1">导航1</span>
            <span v-if="i == 2">导航2</span>
            <span v-if="i == 3">导航3</span>
            <span v-if="i == 4">导航4</span>
            <span v-if="i == 5">导航5</span>
          </a>
        </div>
    </div>
    <div class="container" id="printcontent">
      <div class="section" id="section1">
        <h3>日历</h3>
        <el-calendar v-model="value" />
      </div>
      <div class="section" id="section2">
        <h3>带边框列表</h3>
        <el-descriptions class="margin-top" title="" :column="4" border>
          <template v-for="i in 4">
            <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
            <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
            <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
            <el-descriptions-item label="Remarks">123123</el-descriptions-item>
            <el-descriptions-item label="Username">一一一</el-descriptions-item>
            <el-descriptions-item label="Remarks">123123</el-descriptions-item>
            <el-descriptions-item label="Remarks">-</el-descriptions-item>
            <el-descriptions-item label="Remarks">-</el-descriptions-item>
            <el-descriptions-item label="Remarks">-</el-descriptions-item>
          </template>
        </el-descriptions>
      </div>
      <div class="section" id="section3">
        <h3>普通表格</h3>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
        </el-table>
      </div>
      <div class="section" id="section4">
        <h3>普通卡片</h3>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>Card name</span>
              <el-button class="button" text>Operation button</el-button>
            </div>
          </template>
          <div v-for="o in 10" :key="o" class="text item">{{ 'List item ' + o }}</div>
          <template #footer>Footer content</template>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick, onBeforeUnmount } from 'vue'
const loading = ref(false)
const value = ref(new Date())
const defaultTabs = ref([1, 2, 3, 4, 5])
const activeIndex = ref(1)
const isScroll = ref(true) // 点击导航栏时，暂时停止监听页面滚动
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

onMounted(() => {
  nextTick(() => {
    document.getElementById('scrollBox').addEventListener("scroll", onScroll);
  })
})

onBeforeUnmount(() => {
  document.getElementById('scrollBox').removeEventListener('scroll', onScroll)
})

const scrollToAnchor = (id, index) => {
 activeIndex.value = index
  var anchor = document.getElementById(id);
  var scrollBox = document.getElementById('scrollBox')
  nextTick(() => {
    scrollBox.scrollTo({
      top: anchor.offsetTop - 30,
      behavior: 'smooth'
    });
 })
  // 点击时暂停页面的滚动监听事件，防止点击时导航高亮出现走马灯效果；
  // 此处的定时器存在缺陷，点击完2秒之内滚动还是会偶现走马灯现象；
  isScroll.value = false
  let timeId = '';
  clearTimeout(timeId);
  timeId = setTimeout(() => {
    isScroll.value = true;
  }, 2000);
};

// 滚动监听器
const onScroll = ()=> {
  if(!isScroll.value) return
  // 获取所有锚点元素
  const navContents = document.querySelectorAll('.container .section')
  // 所有锚点元素的 offsetTop
  const offsetTopArr = []
  navContents.forEach(item => {
    offsetTopArr.push(item.offsetTop-30)
  })
  // 获取当前文档流的 scrollTop
  const scrollTop = document.getElementById('scrollBox').scrollTop
  // 定义当前点亮的导航下标
  let navIndex = 1
  for (let n = 1; n <= offsetTopArr.length; n++) {
    // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
    // 那么此时导航索引就应该是 n 了
    if (scrollTop >= offsetTopArr[n-1]) {
      navIndex = n
    }
  }
  // 把下标赋值给 vue 的 data
  activeIndex.value = navIndex
}

</script>
<style scoped lang="scss">
.box{
  // width: 98%;
  margin: auto;
  height: 100%;
  overflow: auto;
}
.fixed-box{
  width: calc(100% - 200px);
  background: white;
  position: fixed;
  top: 84px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
  padding: 5px 30px;
  box-sizing: border-box;
  box-shadow: 1px 1px 1px #ccc;
  span {
    padding: 0 10px;
    list-style: none;
  }
}
.container {
  padding-top: 15px;
  position: relative;
}
.section {
  margin: 20px 0;
}
:deep(.el-tabs ){
  --el-tabs-header-height: 50px;
}
.active_anchor {
  color: #409eff;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1386631.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RFID技术在汽车装备中的应用：提升安全性与效率

RFID技术在汽车装备中的应用：提升安全性与效率

RFID技术在汽车装备中的应用&#xff1a;提升安全性与效率 射频识别&#xff08;RFID&#xff09;技术是一种非接触式的自动识别技术&#xff0c;它利用射频信号及其空间耦合和传输特性&#xff0c;实现对目标对象的信息读写。随着汽车工业的不断发展&#xff0c;汽车装备的技…
阅读更多...
YOLOv8目标检测中数据集各部分的作用

YOLOv8目标检测中数据集各部分的作用

自学答疑使用&#xff0c;持续更新… 在目标检测任务中&#xff0c;通常将整个数据集划分为训练集&#xff08;training set&#xff09;、验证集&#xff08;validation set&#xff09;和测试集&#xff08;test set&#xff09;。这三个数据集在训练和评估过程中具有不同的…
阅读更多...
IT行业——香港优才计划低分段申请之王！

IT行业——香港优才计划低分段申请之王！

IT行业——香港优才计划低分段申请之王&#xff01; 香港优才计划获批率确实没那么看重分数&#xff0c;看了下2023年的获批案例&#xff0c;一些申请者的基础分数刚过80分&#xff0c;照样顺利获批拿到了香港身份&#xff01; 今天就拿真实数据来分析&#xff0c;盘点那些低分…
阅读更多...
JS常用插件 Swiper插件 实现轮播图

JS常用插件 Swiper插件 实现轮播图

Swiper介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架 中文官网地址: https://www.swiper.com.cn/ 点击查看Swiper演示&#xff0c;里面的功能和样式十分丰富&#xff0c;根据自己的需求选择 中文教程中详细介绍了如何使用Swiper API文档中介绍了各个模块以及参…
阅读更多...
gitee完整使用教程，创建项目并上传

gitee完整使用教程，创建项目并上传

目录 一 什么是gitee 二 安装Git 三 登录gitee&#xff0c;生成密钥 四 配置SSH密钥 五 创建项目 六 克隆仓库到本地 七 关联本地工程到远程仓库 八 添加文件 九 异常处理 十 删除仓储 十一 git常用命令 一 什么是gitee gitee是开源中国推出的基于git的代码托管服务…
阅读更多...
我成为开源贡献者的原因竟然是做MySql-CDC数据同步

我成为开源贡献者的原因竟然是做MySql-CDC数据同步

今年下半年机缘巧合下公司决定搭建自己的数据中台&#xff0c;中台的建设势必少不了数据集成。首先面临的就是数据集成技术选型的问题&#xff0c;按照社区活跃度、数据源适配性、同步效率等要求对市面上几个成熟度较高的开源引擎进行了深度调研。 最终经过内部讨论决定用Apac…
阅读更多...
智能安全帽识别系统简析

智能安全帽识别系统简析

在工业安全领域&#xff0c;安全帽识别系统的重要性不言而喻。这种系统利用先进的图像识别技术&#xff0c;确保工地上每位工人都佩戴安全帽&#xff0c;从而大幅提升工作场所的安全性。本文旨在探讨这一系统的工作原理、应用范围以及面临的挑战。 安全帽识别系统的工作原理 智…
阅读更多...
查找算法（部分）

查找算法（部分）

顺序查找 顺序查找是最简单的了&#xff0c;属于无序查找算法&#xff0c;它的原理就是从前往后一个一个的找&#xff0c;如果找到了就返回它的位置&#xff0c;否则就返回-1。 如果有多个相同元素的话&#xff0c;返回第一个该元素的位置。 代码&#xff1a; #include<…
阅读更多...
高通开发系列 - RT补丁死机问题scheduling while atomic

高通开发系列 - RT补丁死机问题scheduling while atomic

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅！ 你的喜欢就是我写作的动力！ 返回：专栏总目录 目录 背景概述问题现象了解RTOS如何使用高分辨率计时器？RT-mutex 实现设计线程化的中断处理程序睡眠spinlock
阅读更多...
图解python | 字符串及操作

图解python | 字符串及操作

1.Python元组 Python的元组与列表类似&#xff0c;不同之处在于元组的元素不能修改。 元组使用小括号&#xff0c;列表使用方括号。 元组创建很简单&#xff0c;只需要在括号中添加元素&#xff0c;并使用逗号隔开即可。 tup1 (ByteDance, ShowMeAI, 1997, 2022) tup2 (1…
阅读更多...
通过FTP和HTTPD，搭建内网yum仓库

通过FTP和HTTPD，搭建内网yum仓库

一、yum仓库的简介 1.yum介绍 yum是一个基于RPM包&#xff08;是Red-Hat Package Manager红帽软件包管理器的缩写&#xff09;构建的软件更新机制&#xff0c;能够自动解决软件包之间的依赖关系。解决了日常工作中的大量查找安装依赖包的时间 为什么会有依赖关系的发生 因为li…
阅读更多...
GPT图解大模型是怎样构建的

GPT图解大模型是怎样构建的

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星评选TOP 10&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作…
阅读更多...
网络文件共享服务

网络文件共享服务

目录 一.存储类型&#xff1a; 1.存储类型分为三种&#xff1a; 2.NAS的概述&#xff1a; 3.SAN的概述&#xff1a; 4.DAS的概述&#xff1a; 二.FTP 文件传输协议&#xff1a; 1.FTP工作原理&#xff1a; 2.FTP的两种模式&#xff1a; 3.FTP的用户认证&#xff1a; 三…
阅读更多...
Ncast盈可视高清智能录播系统busiFacade RCE漏洞(CVE-2024-0305)

Ncast盈可视高清智能录播系统busiFacade RCE漏洞(CVE-2024-0305)

产品介绍 Ncast盈可视高清智能录播系统是一套新进的音视频录制和播放系统&#xff0c;旨在提供高质量&#xff0c;高清定制的录播功能。 漏洞描述 广州盈可视电子科技有限公司的高清智能录播系统存在信息泄露漏洞(CVE-2024-0305)&#xff0c;攻击者可通过该漏洞&#xff0c;…
阅读更多...
【HarmonyOS4.0】第十篇-ArkUI布局容器组件(二)

【HarmonyOS4.0】第十篇-ArkUI布局容器组件(二)

三、层叠布局容器&#xff08;Stack&#xff09; 堆叠容器组件 Stack的布局方式是把子组件按照设置的对齐方式顺序依次堆叠&#xff0c;后一个子组件覆盖在前一个子组件上边。 注意&#xff1a;Stack 组件层叠式布局&#xff0c;尺寸较小的布局会有被遮挡的风险&#xff0c; …
阅读更多...
【PyQt小知识 - 7】：QLineEdit设置输入的文本以圆点或星号等方式显示

【PyQt小知识 - 7】：QLineEdit设置输入的文本以圆点或星号等方式显示

文章目录 setEchoMode setEchoMode 在PyQt中&#xff0c;QLineEdit是一种用于接收用户输入的小部件&#xff08;widget&#xff09;。setEchoMode是QLineEdit类中的一个方法&#xff0c;可以用于设置文本输入框中的文本显示模式。它接受一个参数来指定要使用的模式。 setEcho…
阅读更多...
springIoc依赖注入循环依赖三级缓存

springIoc依赖注入循环依赖三级缓存

springIoc的理解&#xff0c;原理和实现 控制反转&#xff1a; 理论思想&#xff0c;原来的对象是由使用者来进行控制&#xff0c;有了spring之后&#xff0c;可以把整个对象交给spring来帮我们进行管理 依赖注入DI&#xff1a; 依赖注入&#xff0c;把对应的属性的值注入到…
阅读更多...
一文读懂「生成式AI，AIGC」

一文读懂「生成式AI，AIGC」

一、什么是AIGC&#xff1f; 二、技术层面发展 AIGC要素&#xff1a;算力 算法 数据 AIGC发展重点 AIGC产业链路 AIGC未来方向 三、产业层面发展 AIGC产业融资 AIGC场景应用 四、AIGC应用分析 AI 游戏 eg&#xff1a;网易伏羲 AI 广告营销 eg&#xff1a; AI 影…
阅读更多...
vue使用i18n实现国际化

vue使用i18n实现国际化

安装 npm install vue-i18nnext在src下创建一个名为i18n的文件夹,并按照下图创建需要的文件 i18n/locales/en.json {"common": {"BUTTON_OK": "OK","BUTTON_CANCEL": "Cancel","BUTTON_SUBMIT": "Submit…
阅读更多...
虾皮广告数据分析：如何在虾皮（Shopee）平台上进行广告推广

虾皮广告数据分析：如何在虾皮（Shopee）平台上进行广告推广

在虾皮&#xff08;Shopee&#xff09;平台上进行广告推广是提高产品曝光率和销量的有效方式。通过采取一系列步骤&#xff0c;卖家可以充分利用Shopee的广告功能来推广产品。本文将介绍如何在Shopee上进行广告推广&#xff0c;并提供一些实用的技巧和建议。了解广告类型首先&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023