前端实现标题滚动点击导航

效果图

在这里插入图片描述
在这里插入图片描述

右边滚动的html代码

<div class="right-box"><el-tabs v-model="isScrollNow" tab-position="right" class="updateTab" @tab-click="scrollTo"style="height: fit-content;"><el-tab-pane label="单位基本信息" name="0"></el-tab-pane><el-tab-pane label="产品基本信息" name="1"></el-tab-pane><el-tab-pane label="版本信息" name="2"></el-tab-pane><el-tab-pane v-if="dialogType === 'views'" label="操作日志" name="3"></el-tab-pane></el-tabs>
</div>

在mounted中要监听页面滚动

window.removeEventListener('scroll', this.onScroll, false)

要给父盒子去一个名称content_wrapper,然后在每一个标题盒子要roll_box类名
在这里插入图片描述

滚动的方法
isScrollNows是导航栏绑定的值

onScroll() {// 为每个标题都要有这个class名const navContents = document.querySelectorAll('.roll_box')const offsetTopArr = []navContents.forEach((item) => {offsetTopArr.push(item.offsetTop)})const scrollTop = this.$refs.content_wrapper.scrollTop// 滚动的位置let navIndex = 0for (let n = 0; n < offsetTopArr.length; n++) {if (scrollTop * 1 >= offsetTopArr[n] * 1) {navIndex = nthis.isScrollNow = String(navIndex)// 滑动底部选中最后一个选项// if (//     document.documentElement.scrollHeight//     - scrollTop//     <= document.documentElement.clientHeight + 50// ) {//     this.isScrollNow = String(offsetTopArr.length - 1)// }}}},

点击导航栏滚动滚动条滚动到相应的位置

scrollTo(tab) {document.getElementsByClassName('roll_box')[tab.index] && document.getElementsByClassName('roll_box')[tab.index].scrollIntoView({behavior: 'smooth',block: 'start',})},

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

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

相关文章

Unity Meta Quest MR 开发(三):Scene API 配置+实现虚拟与现实之间的碰撞

文章目录 &#x1f4d5;教程说明&#x1f4d5; Scene 配置⭐开启场景理解功能和应用访问空间数据的权限⭐OVRSceneManager⭐制作 Plane Prefab 和 Volume Prefab⭐运行场景⭐添加透视材质 &#x1f4d5;虚拟与现实物体的碰撞&#xff08;弹球 Demo&#xff09;&#x1f4d5;Mes…

pytest的常用插件和Allure测试报告

pytest常用插件 pytest-html插件 安装&#xff1a; pip install pytest-html -U 用途&#xff1a; 生成html的测试报告 用法&#xff1a; ​在.ini配置文件里面添加 addopts --htmlreport.html --self-contained-html 效果&#xff1a; 执行结果中存在html测试报告路…

全套电气自动化样例图纸分享,使用SuperWorks自动化版免费设计软件!

今天给大家分享一套完备的电气自动化样例图纸&#xff0c;结构准确、内容清晰&#xff0c;适合初学者入门操作练习。 整套图纸包含图纸目录、原理图、端子列表、连接列表、元件列表、接线图&#xff0c;具有较高的参考价值&#xff0c;请大家点击自行下载文件&#xff01; 1e8…

计算机网络-数据链路层概述(功能概述 链路 数据链路 物理通道 逻辑通道)

文章目录 总览数据链路层的研究思想数据链路层的基本概念数据链路层功能概述 总览 封装成帧指的是数据链路层将来自上层的网络层数据包&#xff08;如IP数据报&#xff09;添加上自己的帧头和帧尾&#xff0c;形成一个完整的帧。这个过程包括了对数据的封装&#xff0c;以便于在…

忘记 RAG:拥抱Agent设计,让 ChatGPT 更智能更贴近实际

RAG&#xff08;检索增强生成&#xff09;设计模式通常用于开发特定数据领域的基于实际情况的ChatGPT。 然而&#xff0c;重点主要是改进检索工具的效率&#xff0c;如嵌入式搜索、混合搜索和微调嵌入&#xff0c;而不是智能搜索。 这篇文章介绍了一种新的方法&#xff0c;灵感…

VScode上无法运行TSC命令,Typescript

如何解决问题 第一步&#xff1a;使用 winx 快捷键&#xff0c;会出现如下弹窗&#xff0c;鼠标左键单击Windows PowerShell 即可打开shell 第二步&#xff1a;运行 set-ExecutionPolicy RemoteSigned 命令&#xff0c;在询问更改执行策略的时候选择敲Y或者A 第三步&#xff…

2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测

2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测 目录 2024美赛预测算法 | 回归预测 | Matlab基于WOA-LSSVM鲸鱼算法优化最小二乘支持向量机的数据多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果…

Vue学习之使用HBuilderX创建并使用vue3.0项目

Vue学习之使用HBuilderX创建并使用vue3.0项目 下文将简述如何使用HBuilderX创建并使用vue3.0项目&#xff0c;包含项目创建、目录介绍、如何引用组件、首页自定义设置。 1、创建vue3.0项目 具体操作之前章节已经阐述过不在冗余介绍&#xff0c;创建时选择vue3项目即可。vue2…

【leetcode题解C++】77.组合 and 216.组合总和III and 17.电话号码的字母组合

77. 组合 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4], ] 示例 2&#xff1a; 输入&#xff1a…

决策树的相关知识点

&#x1f4d5;参考&#xff1a;ysu老师课件西瓜书 1.决策树的基本概念 【决策树】&#xff1a;决策树是一种描述对样本数据进行分类的树形结构模型&#xff0c;由节点和有向边组成。其中每个内部节点表示一个属性上的判断&#xff0c;每个分支代表一个判断结果的输出&#xff…

验证码倒计时:用户界面的小细节,大智慧

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 验证码倒计时&#xff1a;用户界面的小细节&#xff0c;大智慧 前言为什么需要验证码倒计时防止滥用&#xff1a;用户心理&#xff1a; 设计考量可见性&#xff1a;友好性&#xff1a;适应性&#xff…

macOS Sonoma 14系统安装包

macOS Sonoma 14是苹果公司最新推出的操作系统&#xff0c;为Mac用户带来了全新的使用体验。Sonoma是苹果继Catalina之后的又一重要更新&#xff0c;它在改善系统性能、增加新功能、优化用户界面等方面做出了显著贡献。 macOS Sonoma 14系统有许多令人兴奋的新功能和改进&…

文心一言4.0API接入指南

概述 文心一言是百度打造出来的人工智能大语言模型&#xff0c;具备跨模态、跨语言的深度语义理解与生成能力&#xff0c;文心一言有五大能力&#xff0c;文学创作、商业文案创作、数理逻辑推算、中文理解、多模态生成&#xff0c;其在搜索问答、内容创作生成、智能办公等众多…

ShardingSphere 5.x 系列【7】元数据持久化

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 概述2. 单机模式2.1 H22.2 MySQL3. 集群模式3.1 ZooKeeper3.2 Nacos3.3 Cons…

管理类联考-复试-全流程演练-导航页

文章目录 整体第一步&#xff1a;学校导师两手抓——知己知彼是关键学校校训历史 导师你对导师的研究方向有什么认知。 第二步&#xff1a;面试问题提前背——押题助沟通英文面试经典问题——出现概率&#xff1a;100%自我介绍——出现概率&#xff1a;100%为什么选择这个专业&…

C++力扣题目377--组合求和VI 爬楼梯进阶版 322--零钱兑换 279完全平方数

377. 组合总和 Ⅳ 力扣题目链接(opens new window) 难度&#xff1a;中等 给定一个由正整数组成且不存在重复数字的数组&#xff0c;找出和为给定目标正整数的组合的个数。 示例: nums [1, 2, 3]target 4 所有可能的组合为&#xff1a; (1, 1, 1, 1) (1, 1, 2) (1, 2, …

MATLAB | 绘图复刻(十四) | 右侧对齐桑基图,及工具函数SSankey更新

hey 真的好久不见了&#xff0c;本期既是一期绘图复刻教程&#xff0c;也是我写的工具函数的版本更新&#xff0c;本期复刻的图片来自《Nature》&#xff1a; Elmarakeby, H.A., Hwang, J., Arafeh, R. et al. Biologically informed deep neural network for prostate cancer…

ideaIU-2023.2.1安装教程

ideaIU-2023.2.1安装教程 一、ideaIU-2023.2.1安装1.1 下载IdeaIU-2023.2.1安装包1.2 安装ideaIU-2023.2.1 二、ideaIU-2023.2.1激活 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 一、ideaIU-2023.2.1安装 1.1 下载IdeaIU-2023.2.1安装包…

LLM应用开发与落地:使用gradio十分钟搭建聊天UI

一、背景 如果你是做LLM应用开发的&#xff0c;特别是做后端开发&#xff0c;你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中&#xff0c;毕竟react.js, next.js, css, html也不是每个人都那么熟练&#xff0c;对吧&#xff1f;即使…

性能实测:分布式存储 ZBS 与集中式存储 HDS 在 Oracle 数据库场景表现如何

作者&#xff1a;深耕行业的 SmartX 金融团队 金鑫 在金融客户的基础架构环境中&#xff0c;HDS 是一种被广泛使用的存储解决方案。作为集中式存储的代表之一&#xff0c;HDS 拥有高性能、高可用性和可扩展性的企业级存储特点&#xff0c;适用于实时数据处理、虚拟化和灾难备份…