前端滚动锚点(点击后页面滚动到指定位置)
三个常用方案:
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 补充ÿ…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
