【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' });
相关推荐
毅炼3 分钟前
Java 集合常见问题总结(3)
java·开发语言·后端
沐知全栈开发14 分钟前
ionic 对话框:深度解析与最佳实践
开发语言
浅念-1 小时前
C++ string类
开发语言·c++·经验分享·笔记·学习
百锦再1 小时前
Java多线程编程全面解析:从原理到实战
java·开发语言·python·spring·kafka·tomcat·maven
Cosmoshhhyyy1 小时前
《Effective Java》解读第38条:用接口模拟可扩展的枚举
java·开发语言
程序员林北北1 小时前
【前端进阶之旅】节流与防抖:前端性能优化的“安全带”与“稳定器”
前端·javascript·vue.js·react.js·typescript
小冷coding1 小时前
【Java】最新Java高并发高可用平台技术选型指南(思路+全栈路线)
java·开发语言
爱华晨宇2 小时前
Python列表入门:常用操作与避坑指南
开发语言·windows·python
寻星探路2 小时前
【前端基础】HTML + CSS + JavaScript 快速入门(三):JS 与 jQuery 实战
java·前端·javascript·css·c++·ai·html
一切顺势而行2 小时前
python 面向对象
开发语言·python