Element.scrollIntoView()

在此页

句法
范例
注意事项
规范
浏览器兼容性
另请参阅
相关话题


									元素

接口的


								
									scrollIntoView()

method scrolls the element's parent container such that the element on which


								scrollIntoView()

is called is visible to the user

句法

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

参数

alignToTop 可选

是


									布尔

值：

若 true , the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"} . This is the default value.
若 false , the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"} .

scrollIntoViewOptions 可选

Is an Object with the following properties:

behavior 可选: Defines the transition animation.
One of auto or smooth 。默认为 auto .
block 可选: Defines vertical alignment.
One of start , center , end ，或 nearest 。默认为 start .
inline 可选: Defines horizontal alignment.
One of start , center , end ，或 nearest 。默认为 nearest .

范例

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

注意事项

The element may not be scrolled completely to the top or bottom depending on the layout of other elements.

规范

规范	状态	注释
CSSOM (CSS 对象模型) 视图模块 The definition of 'Element.scrollIntoView()' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`scrollIntoView`	Chrome 29	Edge 18 18 The only parameter supported is `alignToTop` . 不支持 12 — 18 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function. No support for `smooth` behavior.	Firefox 1	IE 8 8 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function. No support for `smooth` behavior or `center` 选项。	Opera 38	Safari 6 6 No support for `smooth` behavior or `center` 选项。	WebView Android ≤37	Chrome Android 29	Firefox Android 4	Opera Android 41	Safari iOS 5 5 No support for `smooth` behavior or `center` 选项。	Samsung Internet Android 2.0
`scrollIntoViewOptions`	Chrome 61 61 `block` and `inline` options support the values `start` , `center` , `end` , `nearest` .	Edge 79 79 `block` and `inline` options support the values `start` , `center` , `end` , `nearest` .	Firefox 36 36 No support for `inline` 选项。 Before Firefox 58, `nearest` and `center` values for the `block` option was unsupported. See bug 1389274 .	IE No	Opera 48 48 `block` and `inline` options support the values `start` , `center` , `end` , `nearest` .	Safari No	WebView Android 61 61 `block` and `inline` options support the values `start` , `center` , `end` , `nearest` .	Chrome Android 61 61 `block` and `inline` options support the values `start` , `center` , `end` , `nearest` .	Firefox Android 36 36 No support for `inline` 选项。 Before Firefox 58, `nearest` and `center` values for the `block` option was unsupported. See bug 1389274 .	Opera Android 45 45 `block` and `inline` options support the values `start` , `center` , `end` , `nearest` .	Safari iOS No	Samsung Internet Android 8.0 8.0 `block` and `inline` options support the values `start` , `center` , `end` , `nearest` .

图例

完整支持
不支持
实验。期望将来行为有所改变。

另请参阅

Element.scrollIntoViewIfNeeded()

元数据

最后修改： Feb 24, 2020

在此页

句法

参数

范例

注意事项

规范

浏览器兼容性

图例

另请参阅

相关话题