【javascript】关于js控制滚动的一些注意事项

滚动方式有2种

1、element.scrollIntoView

javascript 复制代码
// 假设你有一个元素的ID是'element-id'
const element = document.getElementById('element-id');
// 滚动到该元素
element.scrollIntoView();
// 如果你想要平滑滚动,可以传递一个选项对象
element.scrollIntoView({ behavior: 'smooth' });

PS:这种方式有2种已知情况下会不生效

  • scrollIntoView()的元素的父容器必须设置滚动,例如:overflow-y: auto;,请注意,这里说的是父容器,是不包含祖先容器的!!!
  • scrollIntoView()requestAnimationFrame()目前不能同时存在

2、element.scrollTo

javascript 复制代码
// 假设你有一个元素的ID是'element-id'
const element = document.getElementById('element-id');
// 滚动到该元素
element.scrollTo(0, 100); // x,y坐标
// 如果你想要平滑滚动,可以传递一个选项对象
element.scrollTo({ top: offsetTop, behavior: 'smooth' });
相关推荐
Amos_Web6 分钟前
Rspack 源码解析 (2) —— 从 rspack build 到输出 dist,完整编译链路详解
前端·javascript
Promising_GEO8 分钟前
全球综合评估模型-GCAM模型的安装与参数解读
开发语言·python·遥感·空间分析
XS03010611 分钟前
并发编程二
java·开发语言
HMS工业网络22 分钟前
STP、RSTP到N-Ring的演进之路
服务器·开发语言·php
张元清24 分钟前
Ref 逃生舱:用 React Hook 解决闭包陈旧、回调身份不稳和强制更新
前端·javascript·面试
历程里程碑37 分钟前
54 深入解析poll多路复用技术
java·linux·服务器·开发语言·前端·数据结构·c++
.千余1 小时前
【Linux 】网络基础1
linux·运维·服务器·开发语言·网络·学习
小短腿的代码世界1 小时前
Qt低级网络编程与零拷贝技术在高频交易中的应用:从QTcpSocket到共享内存的全链路优化
开发语言·网络·qt
计算机安禾1 小时前
【c++面向对象编程】第28篇:new/delete vs malloc/free:C++中正确动态内存管理
开发语言·c++·算法
TechWayfarer1 小时前
IP归属地API实战指南:用IP数据云解析日志挖掘用户地域分布
大数据·开发语言·网络·python·tcp/ip