【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' });
相关推荐
weedsfly4 分钟前
一个电商价格计算案例,带你学会前端开发中的责任链模式
前端·javascript·面试
147API6 分钟前
Claude Tag 进入 Slack 后,团队智能体需要哪些任务与审计字段
java·开发语言·数据库
熬夜苦读学习15 分钟前
QT_信号和槽
开发语言·qt
代码雕刻家17 分钟前
编程语法细节
java·c语言·开发语言
j7~19 分钟前
【C++】C++ 继承全解析:从基本语法到菱形继承的底层原理
开发语言·c++·继承·组合·虚继承·#暑假·七月创作之星博客挑战赛
数行拙笔22 分钟前
C++客户端---String类型
开发语言·c++·bootstrap
影寂ldy28 分钟前
C# Task 进阶:WaitAll / WaitAny / WhenAll / WhenAny
开发语言·c#
左左右右左右摇晃39 分钟前
手写Tomcat原理整理
java·开发语言·笔记·tomcat
孫治AllenSun43 分钟前
【JVM】四大引用类型分析
java·开发语言·jvm
看-是灰机43 分钟前
使用go语言实现对接
linux·开发语言·后端·docker·语言模型·golang·飞书