前端滚动锚点(点击后页面滚动到指定位置)

devtools/2024/12/22 6:49:13/

三个常用方案:
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,如果页面的数据是请求来的,请确保数据渲染完成后进行滚动

页面滚动是会记录上一次滚动状态的,在页面渲染好后又会滚回去。记录页面滚动这个现象一般只限于同步引入的组件,异步的不会(没有滚动记录)


http://www.ppmy.cn/devtools/144298.html

相关文章

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书 一、下载影刀&#xff1a; https://www.winrobot360.com/share/activity?inviteUserUuid595634970300317698 二、加入应用市场 https://www.yingdao.com/share/accede/?inviteKeyb2d3f22a-fd6c-4a…

分布式数据存储基础与HDFS操作实践

本篇博客由作者女朋友亲情赞助&#xff0c;本人所撰写内容见资源文件。 1. 虚拟机集群的安装与配置 1.1 创建并配置两个虚拟机 配置网络&#xff0c;让主机和所有部署的虚拟机处于同一个网段下&#xff0c;主机可以去连虚拟机&#xff0c;虚拟机可以去连主机&#xff0c;虚拟机…

如何让cursor给出更好,更准确的回答的两个配置

通过配置&#xff0c;可以让cursor更好&#xff0c;更准确的回答我们的问题&#xff0c;那这两个配置就要一定打开 1. codebase indexing 配置要打开并且同步 codebase indexing 会对我们的代码进行索引和采集&#xff0c;并且根据代码的上下文进行排序。然后进行推理思考&am…

Java项目--仿RabbitMQ的消息队列--统一硬盘操作

目录 一、引言 二、DiskDataCenter类 1.实例化 2.封装交换机操作 3.封装队列操作 4.封装绑定操作 5.封装消息操作 三、总结 一、引言 上一篇文章介绍了如何将消息文件存入硬盘的操作&#xff0c;这一篇文章就简单介绍一下统一硬盘操作。 二、DiskDataCenter类 1.实例化…

Unity3D仿星露谷物语开发6之角色添加动画

1、目的 给角色添加素材中的动画&#xff0c;最终让角色动起来。 2、准备工作 当前的预设体中的Player对象还不够完善&#xff0c;需要删除掉再优化下。此时应当&#xff1a;Hierarchy中的Player对象切断和预设体的关联&#xff0c;同时删除Prefabs中的Player对象。 首先&a…

How to run Flutter on an Embedded Device

basysKom GmbH | How to run Flutter on an Embedded Device https://github.com/sony/flutter-embedded-linux/wiki/Building-Flutter-Engine-from-source flutter源码下载(最新)-CSDN博客 flutter_engine 交叉编译【自定义编译器(最新)】_flutter。engine 修改-CSDN博客 …

Qt Quick:CheckBox 复选框

复选框不止选中和未选中2种状态哦&#xff0c;它还有1种部分选中的状态。这3种状态都是Qt自带的&#xff0c;如果想让复选框有部分选中这个状态&#xff0c;需要将三态属性&#xff08;tristate&#xff09;设为true。 未选中的状态值为0&#xff0c;部分选中是1&#xff0c;选…

Navicat 17 功能简介 | SQL 美化

SQL美化 本期&#xff0c;我们将深入挖掘 Navicat 的实用的SQL代码美化功能。你只需简单地点击“SQL 美化”按钮&#xff0c;即可轻松完成 SQL 的格式化。 随着 17 版本的发布&#xff0c;Navicat 也带来了众多的新特性&#xff0c;包括兼容更多数据库、全新的模型设计、可视化…