【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' });
相关推荐
我命由我123456 分钟前
Android 开发 - 广播组件(标准广播、有序广播、静态注册广播、分钟到达广播、网络变更广播...)
android·java·开发语言·网络·java-ee·android studio·android-studio
米码收割机29 分钟前
【Python】Python Django+Vue3校园自习室预约管理系统(源码+文档+PPT)【独一无二】
开发语言·python·django
AstartesEternal37 分钟前
python第二次作业(列表,字典)
开发语言·python
张元清42 分钟前
React useUpdateEffect Hook:跳过首次渲染(2026)
javascript·react.js
星恒随风1 小时前
C++ STL 详解:set 与 multiset 的使用、区间查询和算法应用
开发语言·c++·笔记·学习·算法
数聚天成DeepSData1 小时前
外贸海关进出口数据去哪免费下载?从统计到明细的查找指南
linux·服务器·开发语言·前端·网络·人工智能·自然语言处理
再卷也是菜1 小时前
C++11支持并发库
开发语言·c++
Lhan.zzZ1 小时前
QML 开发中的“陷阱”:动态模型更新时,ComboBox 索引为何总是失效?
开发语言·qt
小园子的小菜1 小时前
Java 并发四大工具类深度解析:CountDownLatch、CyclicBarrier、Semaphore、Exchanger 原理、源码与面试考点
java·开发语言·面试
名字还没想好☜1 小时前
React createPortal 实战:模态框逃出 overflow:hidden、事件冒泡与焦点管理
前端·javascript·react.js·ecmascript·react·createportal