scrollIntoView()

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

主要用到的地方就是方便用户操作，比如有一个列表很长，用户进入列表，要优先展示有用的信息，所以需要指定的元素，对用户可用

语法

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

Copy to Clipboard

参数

• alignToTop可选

  一个布尔值：

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

• scrollIntoViewOptions 可选 实验性

  一个包含下列属性的对象：

  • behavior 可选

    定义动画过渡效果，auto 或 smooth 之一。默认为 auto。

  • block 可选

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

  • inline 可选

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

返回值

无 (undefined)。

示例

const element = document.getElementById("box");

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

Copy to Clipboard

注意

取决于其他元素的布局情况，此元素可能不会完全滚动到顶端或底端。

使用指南

1. 不管是用原生，还是ref。或者 useRef获取dom，然后操作即可

遇到的坑

要可见的元素，处在一个滚动的区域，大的盒子也可滚动，导致会向两个方向滚动

利用参数解决

scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });