Element.scrollIntoView()

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

语法

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

参数

alignToTop可选

一个布尔值:

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

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

behavior 可选

定义动画过渡效果,autosmooth 之一。默认为 auto

block 可选

定义垂直方向的对齐,startcenterendnearest 之一。默认为 start

inline 可选

定义水平方向的对齐,startcenterendnearest 之一。默认为 nearest

返回值

无 (undefined)。

示例

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

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

注意

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

规范

Specification
CSSOM View Module
# dom-element-scrollintoview

浏览器兼容性

BCD tables only load in the browser

参见