前言
你是否遇到过类似的需求：需要在页面中实现锚点定位，确保进入页面时某个元素能够出现在可视区域内？点击列表某个元素自动滚动到视图中间？这类需求涉及处理元素与可视区域之间的关系，比如使用 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（最近展示）。
默认效果：
