锚点定位使内容在指定区域显示

news2025/2/22 13:02:06

1、问题描述

在使用锚点定位时,使用 scrollIntoView 方法,导致整个页面随着锚点跳转

2、问题分析

因为最开始做需求的时候,只在最外层设置了一个滚动条,所以导致整体锚点的跳转是随着最外层滚动条距离顶部的高度跳转的,就导致页面可视区域都发生跳转。

3、解决方法


在需要跳转的区域的盒子给定一个高度,然后让内容在该区域滚动显示,之后只需要让可视的区域的滚动条随着 scrollIntoView 跳转,外层的滚动条滚动到顶部即可。

const targetTitle = (item: any) => {
  navList.value.forEach((v: any) => (v.active = false));
  item.active = true;
  (document.getElementById(item.id) as any).scrollIntoView();
  document.documentElement.scrollTop = 0;
}

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

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

相关文章

从NLP视角看电视剧《狂飙》,会有什么发现?

文章目录1、背景2、数据获取3、文本分析与可视化3.1 短评数据预处理3.2 词云图可视化3.3 top关键词共现矩阵网络3.4 《狂飙》演职员图谱构建4、短评相关数据分析与可视化5、总结原文请关注:实用自然语言处理 作者:风兮 建议查看原文: https…

Linux下软件部署安装管理----rpmbuild打包rpm包部署安装

来源:微信公众号「编程学习基地」 文章目录1.安装rpmbuild2.rpm包制作打包rpm包3.rpm包安装4.rpm包卸载1.安装rpmbuild yum install rpmbuild yum install rpmdevtools创建rpm包管理路径,生成rpm相关目录 RPM打包的时候需要编译源码,还需要…

基于Cortex-M7内核STM32F767NIH6,STM32F767VGT6,STM32F767VIT6嵌入式技术资料

STM32F7 32 位 MCUFPU 基于高性能的 ARMCortex-M7 32 位 RISC 内核,工作频率高达 216MHz。Cortex-M7 内核具有单浮点单元(SFPU)精度,支持所有 ARM 单精度数据处理指令与数据类型。同时执行全套 DSP 指令和存储保护单元(MPU)&#…

【完美解决】应用程序无法正常启动(0xc000007b)请单击“确定”关闭应用程序

年期安装CorelDRAW X8 (64-Bit),安装完成之后运行一点毛病都没有,可是过了两三个月,再打开就出现“应用程序无法正常启动(0xc000007b)请单击“确定”关闭应用程序”这个提示框,如下图示 出现这个问题我就上网查找,无非…

Java学习笔记 --- JavaScript

一、JavaScript介绍 JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为 JavaScript JS是弱类型&…

File 文件操作

File 文件操作: 一、常用方法: 方法类型描述public File(String pathname)构造给定一个要操作文件的完整路径public File(File parent, String child)构造给定要操作文件的父路径和子文件名称public boolean createNewFile() throws IOExce…

hexo部署github搭建个人博客 完整详细带图版(更新中)

文章目录0. 前置内容1. hexo创建个人博客2. GitHub创建仓库3. hexo部署到GitHub4. 常用命令newcleangenerateserverdeploy5. 添加插件5.1 主题5.2 博客基本信息5.3 创建新的菜单5.4 添加搜索功能5.5 添加阅读时间字数提示5.6 打赏功能5.7 切换主题5.8 添加不蒜子统计5.9 添加百…

小程序的拉流组件live-player的使用

前言: 我们在小程序中实现音视频-直播/录播 的播放时候,会使用到微信官方提供的两个组件,推流组件和拉流组件,这里来分享下他的拉流组件的使用和具体需要注意的点。 效果图: 1、拉流状态code日志 2、代码使用截图&am…

深度学习 Day26——利用Pytorch实现天气识别

深度学习 Day26——利用Pytorch实现天气识别 文章目录深度学习 Day26——利用Pytorch实现天气识别一、前言二、我的环境三、前期工作1、导入依赖项和设置GPU2、导入数据3、划分数据集四、构建CNN网络五、训练模型1、设置超参数2、编写训练函数3、编写测试函数4、正式训练六、结…

前端利用emailjs发送邮件

最近有一个需求,前端发送一个form表单到一个邮箱,找了一圈发现emailjs还不错就使用他了。首先emailjs官网注册一个账号注册完之后创建一个邮件服务(我这里使用的是谷歌邮箱)链接谷歌邮箱账户 然后创建服务接下来就要创建一个邮件的…

浅谈入门Servlet注解式开发

Servlet3.0版本之后,推出了Servlet基于注解式开发。 优点:开发效率高,直接在java类上使用注解进行标注,可直接省略WEB.xml文件配置import javax.servlet.annotation.WebServlet; WebServlet 使用WebServlet注解标注 WebServlet的…

五子棋的设计与实现

术:Java等摘要:五子棋是一种两人对弈的纯策略型棋类游戏,非常容易上手,老少皆宜。为了更好的推广五子棋,研究简单的人工智能方式,运用Java开发五子棋游戏。主要包含了人机对战,棋盘初始化&#…

中国跻身量子计算第一梯队,为何它是硬科技必争之地?丨两会唠科

科技云报道原创。 “两会唠科”是由腾讯科技推出的两会特别策划,重点讲述中国科技名片。本期与科技云报道联合出品,聚焦中国量子计算研究成果和相关进展。 全球越来越多的国家加入到量子科技领域的竞赛当中,争夺下一步的技术战略制高点。 今…

【论文随笔】Transfer of temporal logic formulas in reinforcement learning

Zhe Xu and Ufuk Topcu. 2019. Transfer of temporal logic formulas in reinforcement learning. In Proceedings of the 28th International Joint Conference on Artificial Intelligence (IJCAI’19). AAAI Press, 4010–4018. 这是一篇将inference和learning结合起来的文章…

Selenium如何隐藏浏览器页面?

Selenium隐藏浏览器页面 背景 在工作,学习中,我们常常会使用selenium来获取网页上的数据,编完完整程序之后,实现真正意义上的自动化获取,此时我们会发现在运行中往往会弹出浏览器页面,在调试过程中&…

Java程序的逻辑控制

一、顺序结构 顺序结构比较简单,如果我们按照代码书写的顺序一行一行执行,将会是这样的: System.out.println("aaa"); System.out.println("bbb"); System.out.println("ccc"); // 运行结果 aaa bbb ccc 如…

网络基础服务器 与SMP、NUMA、MPP 三大体系结构科普

OSI和TCP/IP是很基础但又非常重要的知识,很多知识点都是以它们为基础去串联的,作为底层,掌握得越透彻,理解上层时会越顺畅。今天这篇网络基础科普,就是根据OSI层级去逐一展开的。01计算机网络基础01 计算机网络的分类按…

JVM—类加载子系统

JVM细节版架构图 ​ 本文针对Class Loader SubSystem这一块展开讲解类加载子系统的工作流程 类加载子系统作用 1.类加载子系统负责从文件系统或者网络中加载class文件,class文件在文件开头有特定的文件标识即16进制CA FE BA BE; 2.加载后的Class类信息…

Flink SQL Checkpoint 学习总结

前言 学习总结Flink SQL Checkpoint的使用,主要目的是为了验证Flink SQL流式任务挂掉后,重启时还可以继续从上次的运行状态恢复。 验证方式 Flink SQL流式增量读取Hudi表然后sink MySQL表,任务启动后处于running状态,先查看sin…

IDEA 断点总是进入class文件没有进入源文件解决

前言 idea 断点总是进入class文件没有进入源文件解决 问题 在源文件里打了断点,断点模式启动时却进入了class文件里的断点,而没有进入到java源文件里的断点。 比如:我在 A.java 里打了断点,调试时却进入到了 jar 包里的 A.clas…