那些被忽略但很好用的 Web API / ScrollIntoView

将元素玩弄与指尖，说来就来，呼风唤雨

既然有 IntersectionObserver 能够侦测元素是否进入视窗中，那当然也会有 API 能够主动让元素进入到我们的视野当中，第一时间，各位可能有想到 window.scrollTo 来指定「卷轴」的滚动距离，但其实今天介绍的 ScrollIntoView 能够更方便的做到这件事。

ScrollIntoView

说到操作「卷轴」这件事，最常使用的可能会是 window.scrollTo 或 window.scrollBy，可以让视窗动到任何位置，例如「回到顶部」功能就会使用 scrollTo(0,0) 来完成，不过如果是希望卷轴移动到某个指定元素的位置，那就还需要先计算元素之於文件顶部的距离才能做到，这时候反而运用 ScrollIntoView 就可以轻轻松松解决。

# Element.scrollIntoView

scrollIntoView 并不隶属於 Window，反而是 Element 的 method，而执行 scrollIntoView 就会是需要进入视窗中的目标元素。

const element = document.getElementById("box");
window.addEventListener("click", function () {
  element.scrollIntoView();
});

呼叫之後，视窗卷轴就会直接 「跳」 到 「元素顶部对齐视窗顶部」 的距离，而其实我们可以传入参数来调整卷轴移动的方式与位置，可以接收的参数形式有两种：

• alignToTop： 第一种是传入布林值，这个布林值会决定是否要让「卷轴位置」刚好让元素顶部对齐视窗顶部。

• scrollIntoViewOptions： 第二种是传入物件，这物件当中可以有三个属性来调整更细节的卷动设定：

  • behavior： 这个属性接受 auto、smooth 两个值，决定了卷轴的移动方式要用「跳」的还是用「滑」的。预设为 auto 跳的
  • block： 这个属性决定了垂直卷轴的位置，接受 start、center、end 和 nearest 四种。预设为 start
  • inline： 这个属性则决定水平卷轴的位置，也是 start、center、end 和 nearest 四种。预设为 nearest

其中 start 代表对齐垂直卷轴的顶部、水平卷轴的左侧，end 对齐垂直底部、水平右侧，center 自然就是对齐中心点，而 nearest 则是依据元素当下位置来判断最近的位置来对齐

element.scrollIntoView();
element.scrollIntoView(true);
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({
  behavior: "smooth",
  block: "center",
  inline: "nearest",
});

另外如果目标元素被放在其他也有「卷轴」的元素中，那它会将每一层的卷轴都进行滚动，并且尽可能的达成我们指定的位置，会说「尽可能」是因为未必视窗会有垂直或水平卷轴，若没有卷轴，ScrollIntoView 也是无能为力的。

<div class="wrap">
  <div class="placeholder"></div>
  <div class="target"></div>
  <div class="placeholder"></div>
</div>

const target = document.querySelector(".target");
target.scrollIntoView({
  behavior: "smooth",
  block: "start",
  inline: "end",
});

不晓得有没有人有发现其实 ScrollIntoView 的功能很像 HTML 中 <a> 标签的锚点（Anchor Link）功能，所以这也是为什麽 ScrollIntoView 可能比较少用的原因，但其实锚点连结并不能实践 smooth 滑动效果，也不能指定位置，所以如果你想让 UI/UX 的体验好一点，其实 ScrollIntoView 是更好的选择喔。