【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 小时前
C++可以写手机应用吗
开发语言·c++·智能手机
测试员周周3 小时前
【AI测试智能体】为什么传统测试方法对智能体失效?
开发语言·人工智能·python·功能测试·测试工具·单元测试·测试用例
RSTJ_16253 小时前
PYTHON+AI LLM DAY THREETY-NINE
开发语言·人工智能·python
赏金术士4 小时前
Kotlin 从入门到进阶 之函数模块(核心基础)(二)
android·开发语言·kotlin
xuankuxiaoyao6 小时前
Vue.js实践-组件基础下
前端·javascript·vue.js
小白学大数据6 小时前
JS 混淆加密下的 Python 爬虫解决方案
javascript·爬虫·python
加号36 小时前
【Qt】 应用程序发布:依赖库拷贝与部署指南
开发语言·qt
大家的林语冰6 小时前
前端周刊:axios 疑遭朝鲜黑客“钓鱼“;CSS 新函数上线;npm 上线深色主题;Oxlint 兼容表;ESLint 支持 Temporal......
前端·javascript·css
('-')7 小时前
八股复习2:Java Array list和Linked list
java·开发语言
小黄人软件7 小时前
C++读写编辑CSV文件示例源码 用于数据导入导出,比Excel好使
开发语言·c++·excel