【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' });
相关推荐
ILYT NCTR18 分钟前
搭建Golang gRPC环境:protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程
开发语言·后端·golang
小雅痞25 分钟前
[Java][Leetcode simple] 28. 找出字符串中第一个匹配项的下标
java·开发语言·leetcode
likerhood30 分钟前
java中的不可变类(Immutable)
java·开发语言
Ulyanov35 分钟前
《PySide6 GUI开发指南:QML核心与实践》 第一篇:GUI新纪元——QML与PySide6生态系统全景
开发语言·python·qt·qml·雷达电子对抗
这里不能睡觉1 小时前
js 实现 Blob、File、ArrayBuffer、base64、URL 之间互转
javascript
Rust研习社1 小时前
从入门到实践:Rust 异步编程完全指南
开发语言·后端·rust
拉拉肥_King1 小时前
Ant Design Table 横向滚动条神秘消失?我是如何一步步找到真凶的
前端·javascript
yaoxin5211231 小时前
389. Java IO API - 获取文件名
java·开发语言·python
吴声子夜歌2 小时前
Vue3——新语法
前端·javascript·vue.js
lhbian2 小时前
AI编程革命:Codex让脚本开发提速10倍
开发语言·汇编·jvm·c#