【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' });
相关推荐
黎明smaly4 分钟前
【排序】插入排序
c语言·开发语言·数据结构·c++·算法·排序算法
辣辣y20 分钟前
python基础day08
开发语言·python
用户75794199497034 分钟前
基于JavaScript的简易Git
javascript
gzzeason37 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77838 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
Json____1 小时前
使用python的 FastApi框架开发图书管理系统-前后端分离项目分享
开发语言·python·fastapi·图书管理系统·图书·项目练习
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风1 小时前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子1 小时前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤1 小时前
流量分发代码实战|学会用JS控制用户访问路径
javascript