为啥没有早点知道scrollIntoView！！！

前言

你是否遇到过类似的需求：需要在页面中实现锚点定位，确保进入页面时某个元素能够出现在可视区域内？点击列表某个元素自动滚动到视图中间？这类需求涉及处理元素与可视区域之间的关系，比如使用 scrollTop、scroll、监听滚动等方式实现。

今天发现一种最简单的方式：scrollIntoView，

实现

原始阶段

• 通过scroll、setTimeout实现

• 问题：耗时、切换不够丝滑、占用任务队列

  （ps: 全靠硬算好吧~-~）

效果图

解放双手阶段

• 通过scrollIntoView实现，指定元素id，通过id获取元素
• 优点：可以设置元素出现的位置、支持滚动效果、减少代码、高效实现

效果图

scrollIntoView

scrollIntoView() 方法会滚动元素的父容器，使元素出现在可视区域

语法

// 默认为scrollIntoView(true)
element.scrollIntoView()
// alignToTop 布尔值 可选
element.scrollIntoView(alignToTop)
element.scrollIntoView(scrollIntoViewOptions)

参数说明

alignToTop

• 如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
• 如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions

属性都是可选

behavior

定义滚动效果，值必须以下之一：

• smooth：滚动应该是平滑的动画。
• instant：滚动应该通过一次跳跃立刻发生。
• auto：滚动行为由 scroll-behavior 的计算值决定。

smooth 效果

instant 效果

block

定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。

inline

定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest（最近展示）。

默认效果：

浏览器兼容情况