【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' });
相关推荐
来自远方的老作者42 分钟前
第10章 面向对象-10.4 继承
开发语言·python·继承·单继承·多继承·super函数
逻辑驱动的ken44 分钟前
Java高频面试考点场景题09
java·开发语言·数据库·算法·oracle·哈希算法·散列表
小手cool1 小时前
如何在Java中根据另一个配对集合对一个集合进行排序
java·开发语言
升鲜宝供应链及收银系统源代码服务1 小时前
OMS 订单模块重构正式文档(一)---升鲜宝生鲜配送供应链管理系统
java·开发语言·重构·生鲜配送源代码·生鲜供应链源代码
糯米团子7491 小时前
react速通-3
javascript·react.js·前端框架
心连欣1 小时前
从静态页面到动态交互:DOM操作的核心API解析
前端·javascript·api
零瓶水Herwt1 小时前
Javascript常用设计模式
javascript
风骏时光牛马1 小时前
C Shell脚本编程与系统管理技术实践指南
javascript
烛衔溟1 小时前
TypeScript this 参数类型与全局 this
javascript·ubuntu·typescript
qq_12084093712 小时前
Three.js 工程向:GLTFLoader 管线、Draco/KTX2 与资源管理
开发语言·javascript·ecmascript