【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' });
相关推荐
南 阳12 分钟前
Python从入门到精通day34
开发语言·python
前路不黑暗@13 分钟前
Java项目:Java脚手架项目的统一模块的封装(四)
java·开发语言·spring boot·笔记·学习·spring cloud·maven
消失的旧时光-19431 小时前
第二十四课:从 Java 后端到系统架构——后端能力体系的最终总结
java·开发语言·系统架构
西门吹-禅1 小时前
文本搜索node js--meilisearch
开发语言·javascript·ecmascript
Anastasiozzzz1 小时前
G1垃圾回收流程详解
java·开发语言·算法
前路不黑暗@2 小时前
Java项目:Java脚手架项目的通用组件的封装(五)
java·开发语言·spring boot·学习·spring cloud·bootstrap·maven
sa100272 小时前
京东评论接口调用、签名生成与异常处理
开发语言·数据库·python
问今域中2 小时前
Vue的computed用法解析
前端·javascript·vue.js
赵谨言2 小时前
基于Python实现地理空间数据批处理技术探讨及实现--以“多规合一“总体规划数据空间叠加分析为例
大数据·开发语言·经验分享·python
扶苏10023 小时前
详解Vue3的provide和inject
前端·javascript·vue.js