前端锚点 点击 滑动双向绑定

一. 页面样式

二. 代码

<div class="flexBox"><div class="mdDiv" v-for="(item,index) in tabList" :key="index" :class="nowChoose==index?'choosed':''"   @click="jumpMD(index, item.id)">{{item.name}}</div>
</div>
<div class="mainDiv" @scroll="onscroll"><div id="intro">课程简介</div><div id="bright">课程简介</div><div id="formAndTime">培训形式与时间</div><div id="content">课程内容</div>
</div>
import { ref, nextTick } from "vue"
nextTick(() =>{getTop() // 在nextTick中获取dom元素
})
const tabList = ref([{ name: "课程简介",id:"intro" },{ name: "课程亮点",id:"bright" },{ name: "培训形式与时间",id:"formAndTime" },{ name: "课程内容",id:"content" },])const nowChoose = ref(0)
const isTap = ref(false) // 是否为点击滑动
const jumpMD = (index, id) =>{isTap.value = true // 点击滑动  下标直接变nowChoose.value= indexdocument.getElementById(id).scrollIntoView({behavior: "smooth"})setTimeout(() =>{isTap.value = false }, 300)
}
const scrollList = [] // 几个锚点距离父顶部的距离
const getTop = () =>{ // 获取锚点div到父级的距离scrollList.value = []tabList.value.forEach(item =>{scrollList.value.push(document.getElementById(item.id).offsetTop)})
}
const onscroll = (e) =>{ // 监听页面滚动if (!isTap.value) { // 非点击滑动走这里if (scrollList.value.length) {scrollList.value.forEach((item, index) =>{if (e.target.scrollTop + 60 > item) {nowChoose.value = index}})}}}

三. 易错点讲解

1. 获取子元素到父元素最上方的高
document.getElementById(item.id).offsetTop

在父元素上一定要加

position: relative;

否则就获取到页面顶部的距离了

2. 点击滚动 跟 滚动切换要区分开

监听滚动的事件是一直触发的  我们点击的时候就判断一下 不走滚动里的  当然  滚动也不走监听里的  不然会鬼畜哦

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

风光储一体化园区 | 图扑新能源可视化

随着全球能源结构转型加速&#xff0c;可再生能源成为能源发展的重要方向。风能、太阳能作为清洁、绿色的能源&#xff0c;得到了广泛的开发和应用。与此同时&#xff0c;储能技术的发展为解决风能和太阳能发电的间歇性和波动性问题提供了有效途径。 风光储园区作为整合风电、…

CAD中如何在线加载卫星影像?

CAD在各行各业都有着非常广泛的应用&#xff0c;但在规划设计等行业中&#xff0c;不可避免地需要加载高清卫星影像&#xff0c;从而有利于作规划设计时参考。 现在&#xff0c;就为你分享一种在CAD中在线加载卫星影像的方法&#xff0c;如果需要CAD安装包&#xff0c;请在文末…

解决外网404:清除DNS缓存并配置host主机使用知名公共DNS服务

在 Windows 上清除/刷新 DNS 缓存 对于所有Windows版本&#xff0c;清除DNS缓存的过程都是相同的。你需要使用管理员权限打开命令提示符并运行ipconfig /flushdns。 浏览器清除DNS缓存 大多数现代的Web浏览器都有一个内置的DNS客户端&#xff0c;以防止每次访问该网站时…

白酒:茅台镇白酒的酒厂社会责任与可持续发展

云仓酒庄豪迈白酒&#xff0c;作为茅台镇的品牌&#xff0c;不仅在产品品质和口感方面有着卓着的表现&#xff0c;在酒厂社会责任和可持续发展方面也做出了积极的探索和实践。 首先&#xff0c;云仓酒庄豪迈白酒注重环境保护和资源利用。酒厂在生产过程中严格控制能源消耗和排放…

Codesys 获取系统年、月、日、时、分、秒、星期几 +解决时区问题+ ST语言编程实现代码

一、 效果如图所示 二、功能说明 发现获取的时间比北京时间多一个时区&#xff08;8个小时&#xff09;&#xff0c;解决时区问题获取时间后&#xff0c;单独把年月日时分秒提取出来&#xff0c;单独保存在变量中获取星期几&#xff0c;保存在变量中 三、Codesys用ST语言实现…

数字电路运算器分析

文章目录 1. 半加器 2. 加法器 3. 4位加法器 4. 半减器 5. 减法器 6. 4位减法器 1. 半加器 现在我们来考虑如何用电路来实现1位加法。假如有两个1位二进制数A、B&#xff0c;它们的和为1位二进制数S&#xff0c;那么存在下面几种情况&#xff1a; 如果A0&#xff0c;B…

RTC实时时钟

一、Unix时间戳 1、Unix 时间戳 &#xff08;1&#xff09;Unix 时间戳&#xff08;Unix Timestamp&#xff09;定义为从UTC/GMT的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒 &#xff08;2&#xff09;时间戳存储在一个秒计数器中&#xff0c;秒计数器为…

行业分析---揭开新工业革命序幕的英伟达

1 背景 在之前的博客中&#xff0c;笔者撰写了多篇行业类分析的文章&#xff08;科技新能源&#xff09;&#xff1a; 《行业分析---我眼中的Apple Inc.》 《行业分析---马斯克的Tesla》 《行业分析---造车新势力之蔚来汽车》 《行业分析---造车新势力之小鹏汽车》 《行业分析-…

如何设置天锐绿盾的数据防泄密系统

设置天锐绿盾的数据防泄密系统&#xff0c;可以按照以下步骤进行&#xff1a; 一、系统安装与初始化 在线或离线安装天锐绿盾数据防泄密系统&#xff0c;确保以管理员身份运行安装包&#xff0c;并按照安装向导的提示完成安装。输入序列号进行注册&#xff0c;激活系统。 二…

AI会淘汰程序员吗?提示词工程师是答案吗?

在科技领域&#xff0c;每两年就会有一个热门概念&#xff0c;吸引大量的人力、物力投入&#xff0c;大数据、区块链、WEB3、5G、元宇宙莫不如此&#xff0c;2023年爆火的AI会是下一个雷声大雨点小的泡沫吗&#xff1f; 这个问题其实不太好回答&#xff0c;在元宇宙兴起初期&a…

汽车传动系统为汽车动力总成重要组成部分 我国市场参与者数量不断增长

汽车传动系统为汽车动力总成重要组成部分 我国市场参与者数量不断增长 汽车系统主要包括动力系统、制动系统、传动系统、转向系统、行驶系统、燃油供给系统、照明系统以及电器系统。汽车传动系统指能够将发动机产生的动力转化为车辆行驶驱动力的动力传递装置。汽车传动系统为汽…

利用原生HTML + CSS + JS实现歌词滚动

对于很多音乐APP&#xff0c;都有这么一个功能&#xff0c;就是根据歌曲的进度来控制对应的歌词滚动&#xff0c;如下图所示&#xff1a; 大概这样的效果&#xff0c;我此次是使用原生的HTMLCSSJS来实现的&#xff0c;以下是具体的实现过程。 1. 数据获取与处理 对于数据来源&…

40、基于深度学习的线性预测设计(matlab)

1、原理及流程 深度学习的线性预测是一种利用深度神经网络模型进行线性回归预测的方法。其设计原理主要基于神经网络的层次化特性&#xff0c;利用多层感知器&#xff08;MLP&#xff09;等模型进行特征学习和非线性变换&#xff0c;从而提高线性预测的准确性。 设计流程如下…

Siemens-NXUG二次开发-创建平面(无界非关联)、固定基准面[Python UF][20240614]

Siemens-NXUG二次开发-创建平面&#xff08;无界非关联&#xff09;、固定基准面[Python UF][20240614] 1.python uf函数1.1 NXOpen.UF.Modeling.CreatePlane1.2 NXOpen.UF.ModlFeatures.CreateFixedDplane 2.示例代码2.1 pyuf_plane.py 3.运行结果3.1 内部模式3.1.1 NXOpen.UF…

应变玻璃合金是航天产业重要弹性材料 研究开发意义重大

应变玻璃合金是航天产业重要弹性材料 研究开发意义重大 应变玻璃&#xff0c;是一种形状记忆合金&#xff0c;为纳米级材料&#xff0c;其短程有序晶格应变区域呈冻结状态&#xff0c;具有典型的玻璃化转变特征&#xff0c;可以对外界刺激产生应变反应&#xff0c;也称为应变玻…

【网络编程开发】17.“自动云同步“项目实践

17."自动云同步"项目实践 文章目录 17."自动云同步"项目实践项目简介功能需求需求分析实现步骤 1.实现TCP通信server.c 服务端tcp.hclient.c 客户端 函数封装tcp.ctcp.hserver.cclient.c编译运行 2.实现文件传输sever.cclient.ctcp.ctcp.hMakeifle编译运行…

MES管理系统中的质量管理活动是什么

在制造业的广阔天地中&#xff0c;质量管理如同航船的指南针&#xff0c;指引着产品品质的航行方向。而随着科技的日新月异&#xff0c;MES管理系统在质量管理领域扮演着越来越重要的角色。MES管理系统不仅连接了企业的管理层与车间生产现场&#xff0c;更在质量管理的各个环节…

RS485常见问题及解决方法

RS485常见问题及解决方法 RS485总线是工业上最常用的通信方式之一&#xff0c;在实际布线或使用过程中通常会出现一系列问题&#xff0c;今天总结一些平时RS485通讯可能会出现的通讯问题及其解决方法以供大家参考。 一、什么是RS485&#xff1f; RS485&#xff0c;全称为TIA…

QT(超详细从0开始)

目录 1.2 Qt的优点 2.安装Qt 3.创建项目 4.解读Qt自动生成的代码 ​编辑 5.Qt Designer 6.Qt对象数 7.Qt乱码问题 8.Qt坐标系的认识 9.信号和槽 9.1 connect 9.2 自定义槽函数 9.3 自定义信号 9.4 断开信号链接&#xff08;disconnect&#xff09; 9.5.lambda表…

家庭智能助手:Kompas AI引领家居智能化新纪元

一、引言 在数字化浪潮的推动下&#xff0c;现代家庭生活正迅速向智能化转型。从简单的自动化设备到复杂的智能家居系统&#xff0c;智能技术正悄无声息地改变我们的日常生活。Kompas AI作为一款前沿的家庭智能助手&#xff0c;不仅预示着家庭生活的未来趋势&#xff0c;更以其…