【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' });
相关推荐
daad7779 分钟前
rcu 内核线程
java·开发语言
xzjiang_36514 分钟前
检查是否安装了MinGW 编译器
开发语言·qt·visual studio code
百锦再41 分钟前
Java JUC并发编程全面解析:从原理到实战
java·开发语言·spring boot·struts·kafka·tomcat·maven
清水白石0081 小时前
突破性能瓶颈:深度解析 Numba 如何让 Python 飙到 C 语言的速度
开发语言·python
Eternity∞1 小时前
Linux系统下,C语言基础
linux·c语言·开发语言
wangluoqi2 小时前
c++ 树上问题 小总结
开发语言·c++
Go_Zezhou3 小时前
pnpm下载后无法识别的问题及解决方法
开发语言·node.js
前路不黑暗@3 小时前
Java项目:Java脚手架项目的 C 端用户服务(十五)
java·开发语言·spring boot·学习·spring cloud·maven·mybatis
一个处女座的程序猿O(∩_∩)O4 小时前
Python异常处理完全指南:KeyError、TypeError、ValueError深度解析
开发语言·python
好学且牛逼的马4 小时前
从“Oak”到“虚拟线程”:JDK 1.0到25演进全记录与核心知识点详解a
java·开发语言·python