【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' });
相关推荐
weixin_523185324 分钟前
Java基础知识总结(四):引用数据类型与参数传递机制
java·开发语言·python
Nayxxu4 分钟前
Claude API 生产稳定性设计:超时、降级、备用模型和告警怎么做
开发语言·php
王cb13 分钟前
WinRT Server and Client c#
开发语言·c#
Selina K25 分钟前
C中日历时间转换
c语言·开发语言
怪我冷i32 分钟前
zig语言学习笔记——heap-memory
开发语言·golang·zig
.千余1 小时前
【C++】手写双向链表:list容器模拟实现
开发语言·c++·笔记·学习·其他
人道领域1 小时前
【LeetCode刷题日记】93.复原IP地址
java·开发语言·算法·leetcode
caimouse1 小时前
Reactos 第 3 章 内存管理 — 【中篇】Hyperspace、系统空间、API 与异常
c语言·开发语言·windows·架构
半岛@少年2 小时前
都是JS,CJS和ESM有什么区别?
javascript·esm·前端模块化·cjs
摇滚侠2 小时前
JavaWeb 全套教程 Listener 112-113
java·开发语言·servlet·tomcat·intellij-idea