【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' });
相关推荐
FRing0332 分钟前
JavaScript入门到精通二十四(正则表达式、元字符、修饰符)
开发语言·前端·javascript·正则表达式
西索斯coding37 分钟前
Grok 4.7 调用一直 401 怎么办?不是 Key 过期,是 Authorization 头格式问题——排查全流程 + 修复示例
服务器·开发语言·ai·php
大明二代1 小时前
从 RAG 到有记忆的 Agent:Mastra Memory 与 PostgreSQL 实战
前端·javascript·人工智能
SEO_juper1 小时前
hreflang 审计工具:外贸多语言站谷歌SEO的隐性杀手
开发语言·人工智能·爬虫·python·seo
WJ.Polar1 小时前
final、单例类、枚举类、抽象类、接口
java·开发语言
小羊没烦恼!2 小时前
C#综合揭秘——Entity Framework 并发处理详解
java·开发语言·前端·javascript·数据库·mysql·c#
艾iYYY2 小时前
【无标题】
linux·开发语言·网络·操作系统
NetX行者2 小时前
Rust 初体验:一个全栈工程师的编译器“毒打“笔记
开发语言·笔记·rust
OpsEye2 小时前
模型能力波动怎么办?网关侧做模型质量监控与自动切换
javascript·ai编程
我就是不信3 小时前
Java8 lambda 表达式 forEach 如何提前终止?
开发语言·windows·python