scrollIntoView() 方法

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

1、语法

• element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
• element.scrollIntoView(alignToTop); // Boolean 型参数
• element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

2、参数

（1）alignToTop（可选）
一个Boolean值：

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

（2）scrollIntoViewOptions （可选）
一个包含下列属性的对象：

• behavior 可选
  定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。
• block 可选
  定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。
• inline 可选
  定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

3、示例

• var element = document.getElementById(“box”);
• element.scrollIntoView();
• element.scrollIntoView(false);
• element.scrollIntoView({block: “end”});
• element.scrollIntoView({behavior: “smooth”, block: “end”, inline: “nearest”});

4、实际例子

scrollTo() {
	setTimeout(() => {
        document.getElementsByClassName("my-class")[0].scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "start", // 上边框与视窗顶部平齐。默认值
        });
      }, 200);
}

5、注意

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