Element.scrollIntoView()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Element
接口的 scrollIntoView()
方法会滚动元素的父容器,使被调用 scrollIntoView()
的元素对用户可见。
语法
js
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
参数
alignToTop
可选-
一个布尔值:
- 如果为
true
,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的scrollIntoViewOptions: {block: "start", inline: "nearest"}
。这是这个参数的默认值。 - 如果为
false
,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}
。
- 如果为
scrollIntoViewOptions
可选 实验性-
一个包含下列属性的对象:
behavior
可选-
定义滚动是立即的还是平滑的动画。该选项是一个字符串,必须采用以下值之一:
smooth
:滚动应该是平滑的动画。instant
:滚动应该通过一次跳跃立刻发生。auto
:滚动行为由scroll-behavior
的计算值决定。
block
可选-
定义垂直方向的对齐,
start
、center
、end
或nearest
之一。默认为start
。 inline
可选-
定义水平方向的对齐,
start
、center
、end
或nearest
之一。默认为nearest
。
返回值
无 (undefined
)。
示例
js
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