前端滚动锚点(点击后页面滚动到指定位置)
三个常用方案:
1.scrollintoView
把调用该方法的元素滚动到屏幕的指定位置,中间,底部,或者顶部
优点:方便,只需要获取元素然后调用
缺点:不好精确控制,只能让元素指定滚动到中间,顶部,底部,没法设置偏移
block可以设置为center,end,start等来控制在页面显示的位置。
注意的就是
<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{document.getElementById(target)?.scrollIntoView({block:'center';
})
</script><template><button>美妆</button><button>数码</button><button>美食</button><button>家居</button><button>黄金</button><div class="home" id="home">// 五个楼层<div class="part" id="part1">美妆</div><div class="part" id="part2">数码</div><div class="part" id="part3">美食</div><div class="part" id="part4">家居</div><div class="part" id="part5">黄金</div></div>
</template><style>
.home {width: 1000px;margin: 0 auto;height: 90vh;overflow-y: scroll;
}
.part {margin-top: 20px;border: 1px solid red;height: 600px;
}
.needData {height: 600px;
}
</style>
2.scrollTo
把可滚动元素滚动到指定x,y坐标优点:可以精确控制到具体多少px
缺点:得先获取到x,y坐标
需要注意的是,这个方法的调用者并不是要看到的元素,而是可滚动的元素。像方法一,调用scrollintoView方法的是五个楼层本身,但是如果是调用scrollTo的话是调用他们的父级元素(id="home"的div盒子)它才是可滚动的元素.
<script setup>
import {onMounted, ref } from 'vue'
import {useRoute }from 'vue-router'
const { query }= useRoute();
const target = query.target
onMounted(()=>{const targetDom = document.getElementById(target);const targetRect = targetDom.getBoundingClientRect();document.getElementById(home)?.scrollTo(targetRect.x, targetRect.y - 100);
})
</script><template><button>美妆</button><button>数码</button><button>美食</button><button>家居</button><button>黄金</button><div class="home" id="home"><div class="part" id="part1">美妆</div><div class="part" id="part2">数码</div><div class="part" id="part3">美食</div><div class="part" id="part4">家居</div><div class="part" id="part5">黄金</div></div>
</template>
3.scrollBy
滚动指定的x,y距离。也就是让他滚动一定距离,不指定坐标
优点:当我们只是做移动,而不是滚到某个指定的元素时
缺点:得自己算出多少距离
这个方法用的少就不举例了
最后:要注意的点,记住这么几个操作
1,如果是打开就滚动到指定位置,vue/react项目一定要在你页面数据渲染完成后滚动
2,如果不含有请求,记得在onMounted(vue),或者useEffect(react)中进行滚动操作,如果是页面滚动,可能还要在加一个小延迟(setTimeout)
3,如果页面的数据是请求来的,请确保数据渲染完成后进行滚动
页面滚动是会记录上一次滚动状态的,在页面渲染好后又会滚回去。记录页面滚动这个现象一般只限于同步引入的组件,异步的不会(没有滚动记录)
相关文章:
前端滚动锚点(点击后页面滚动到指定位置)
三个常用方案:1.scrollintoView 把调用该方法的元素滚动到屏幕的指定位置,中间,底部,或者顶部 优点:方便,只需要获取元素然后调用 缺点:不好精确控制,只能让元素指定滚动到中间&…...
使用SSL加密465端口发送邮件
基于安全考虑,云虚拟主机的25端口默认封闭,如果您有发送邮件的需求,建议使用SSL加密端口(465端口)来对外发送邮件。本文通过提供.NET、PHP和ASP样例来介绍使用SSL加密端口发送邮件的方法,其他语言的实现思路…...
一些面试题总结(一)
1、string为什么是不可变的,有什么好处 原因: 1、因为String类下的value数组是用final修饰的,final保证了value一旦被初始化,就不可改变其引用。 2、此外,value数组的访问权限为 private,同时没有提供方…...
泄露的文档显示 Google 似乎意识到了 Tensor 处理器存在过热问题
Google 知道其 Tensor 芯片存在一些问题,尤其是在过热和电池寿命方面,显然他们正在努力通过即将推出的代号为"Malibu"的 Tensor G6 来解决这一问题。 Android Authority 泄露的幻灯片显示,过热是基于 Tensor 的 Pixel 手机退换货的…...
python爬虫案例——网页源码被加密,解密方法全过程
文章目录 1、任务目标2、网页分析3、代码编写1、任务目标 目标网站:https://jzsc.mohurd.gov.cn/data/company,该网站的网页源码被加密了,用于本文测验 要求:解密该网站的网页源码,请求网站并返回解密后的明文数据,网页内容如下: 2、网页分析 进入网站,打开开发者模式,…...
2.4_SSRF服务端请求伪造
SSRF服务端请求伪造 定义:服务端请求伪造。是一种攻击者构造请求后,交由服务端发起请求的漏洞; 产生原理:该服务器提供了从其他服务器获取数据的功能,但没有对用户提交的数据做严格校验; 利用条件&#…...
数据分析反馈:提升决策质量的关键指南
内容概要 在当今快节奏的商业环境中,数据分析与反馈已成为提升决策质量的重要工具。数据分析不仅能为企业提供全面的市场洞察,还能帮助管理层深入了解客户需求与行为模式。掌握数据收集的有效策略和工具,企业能够确保获得准确且相关的信息&a…...
一步步安装deeponet的详细教学
1.deepoent官网如下: https://github.com/lululxvi/deeponet 需要下载依赖 1.python3 2.DeepXDE(这里安装DeepXDE<0.11.2,这个最方便) Optional: For CNN, install Matlab and TensorFlow 1; for Seq2Seq, install PyTorch࿰…...
Devops业务价值流:版本发布最佳实践
敏捷开发中,版本由多个迭代构建而成,每个迭代都是产品进步的一环。当版本最后一个迭代完成时,便启动了至关重要的上线流程。版本发布流程与规划流程相辅相成,确保每个迭代在版本中有效循环执行,最终达成产品目标。 本…...
背包问题(三)
文章目录 一、二维费用的背包问题二、潜水员三、机器分配四、开心的金明五、有依赖的背包问题 一、二维费用的背包问题 题目链接 #include<iostream> #include<algorithm> using namespace std; const int M 110; int n,m,kg; int f[M][M];int main() {cin >…...
linux之调度管理(2)-调度器 如何触发运行
一、调度器是如何在程序稳定运行的情况下进行进程调度的 1.1 系统定时器 因为我们主要讲解的是调度器,而会涉及到一些系统定时器的知识,这里我们简单讲解一下内核中定时器是如何组织,又是如何通过通过定时器实现了调度器的间隔调度。首先我们…...
深入理解 Vue 3 中的 Props
深入理解 Vue 3 中的 Props Vue 3 引入了 Composition API 等新特性,组件的定义和使用也变得更为灵活。而在组件通信中,Props(属性)扮演了重要角色,帮助父组件向子组件传递数据,形成单向的数据流动&#x…...
校园周边美食探索及分享平台
摘要: 美食一直是与人们日常生活息息相关的产业。传统的电话订餐或者到店消费已经不能适应市场发展的需求。随着网络的迅速崛起,互联网日益成为提供信息的最佳俱渠道和逐步走向传统的流通领域,传统的美食业进而也面临着巨大的挑战࿰…...
内网对抗-信息收集篇SPN扫描DC定位角色区域定性服务探针安全防护凭据获取
知识点: 1、信息收集篇-网络架构-出网&角色&服务&成员 2、信息收集篇-安全防护-杀毒&防火墙&流量监控 3、信息收集篇-密码凭据-系统&工具&网站&网络域渗透的信息收集: 在攻防演练中,当完成边界突破后进入内…...
石墨舟氮气柜:半导体制造中的关键保护设备
石墨舟是由高纯度石墨材料制成的,主要用于承载硅片或其他基板材料通过高温处理过程,是制造半导体器件和太阳能电池片的关键设备之一。 石墨舟在空气中容易与氧气发生反应,尤其是在高温处理后,表面可能更为敏感;石墨舟具…...
性能调优专题(7)之Innodb底层原理与Mysql日志机制深入剖析
一、MYSQL的内部组件结构 大体来说,Mysql可以分为Server层和存储引擎层两部分。 1.1 Server层 Server层主要包括连接器、查询缓存、词法分析器、优化器等。涵盖MYSQL的大多数核心服务功能,以及所有的内置函数(如日期、时间、数学和加密函数等),所有跨存储引擎的功…...
量子计算及其在密码学中的应用
💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 引言 量子计算概述 定义与原理 发展…...
LSM树 (Log-Structured Merge Tree)、Cuckoo Hashing详细解读
一、LSM 树 (Log-Structured Merge Tree) LSM 树(Log-Structured Merge Tree) 是一种专为 高效写入和批量更新 设计的数据结构,特别适合于 高写入密度 的应用场景,如数据库和文件系统。它广泛用于 NoSQL 数据库(如 Ca…...
VMware中的重要日志文件 vobd.log 学习总结
最近几天处理完毕存储的故障后,接着就是host方面的问题,Vmware无法访问到存储,其实存储的LUN和POOL 已经online ready了,但是主机还是访问不到存储。 这里介绍下Vmware中的一个重要的日志文件 vobd.log,该文件对于分析…...
MyBatis 返回 Map 或 List<Map>时,时间类型数据,默认为LocalDateTime,响应给前端默认含有‘T‘字符
一、问题 MyBatis 返回 Map 或 List时,时间类型数据,默认为LocalDateTime Springboot 响应给前端的LocalDateTime,默认含有’T’字符,如何统一配置去掉 二、解决方案 1、pom.xml 增加依赖(2024.11.6 补充ÿ…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
