【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' });
相关推荐
devilnumber2 小时前
Java 代理模式(简单理解回顾)
java·开发语言·代理模式
用户83134859306982 小时前
Vue3 事件:常用用法与开发高频坑点
前端·javascript·vue.js
invicinble2 小时前
对服务器资源的理解--理解用户请求,部署,服务器资源相关的映射层
开发语言
漫步人生走在路上2 小时前
用小语种SEO突破外贸B2B天花板:法语、德语市场的实测数据
开发语言·前端·javascript·人工智能·搜索引擎·ecmascript
yuniko-n2 小时前
【JUC】线程池
java·开发语言
dwm888888882 小时前
c# 创建使用本地NuGet包
开发语言·c#
2601_962885723 小时前
如何用 Python 获取上证指数、沪深300、中证500 等指数行情?
开发语言·python
张张123y3 小时前
后端第六课:Python 语法速通(0 基础入门,AI 应用开发的第一门语言)
开发语言·人工智能·python·ai·后端开发
Want5953 小时前
Python跳动的爱心①
开发语言·python·数学建模
ydjs678899-bot3 小时前
您的Next.js中间件匹配器配置可能会跳过您认为它保护的路由
开发语言·javascript·中间件