【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' });
相关推荐
默_笙16 分钟前
😁 LLM 不知道的事它不会说"不知道",而是会"编"——RAG 就是让它闭嘴先查资料
前端·javascript
Revolution6118 分钟前
变量提升到底提升了什么:为什么 var 是 undefined,let 却直接报错
前端·javascript
labixiong23 分钟前
ES2026 落地了什么?两个真上线的特性 + 两个被毙的,一次讲清楚
javascript·ecmascript 6·ecmascript 8
lzhdim25 分钟前
C# 中读取CPU、硬盘和内存温度
开发语言·c#
Irene199127 分钟前
Oracle PL/SQL Developer 版本差异(11g、14)实战总结
java·开发语言
qq_4480111635 分钟前
C语言中的getchar()
c语言·开发语言
IT知识分享36 分钟前
WebP转JPG开发经验:从格式解码到本地批量转换的实践
javascript·python·图片转换
肖志-AI全栈40 分钟前
JavaScript 快速排序:从 pivot、双指针到分治思想
开发语言·javascript·排序算法
野生风长1 小时前
c++类和对象(this指针,重载operator,习题总结)
java·开发语言·c++
雪的季节1 小时前
Python「假多态」与 C++「真多态」的核心区别
开发语言·c++