这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。

语法

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

参数

alignToTop
一个Boolean值:
  • 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
  • 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}
scrollIntoViewOptions 可选
一个带有选项的object:
{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}
behavior 可选
定义缓动动画, "auto""instant", 或 "smooth" 之一。默认为 "auto"
block 可选
"start""center""end", 或 "nearest"之一。默认为 "start"
inline 可选
"start""center""end", 或 "nearest"之一。默认为 "nearest"

示例

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

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

注意

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

标准

标准 状态 注释
CSS Object Model (CSSOM) View Module
Element.scrollIntoView()
Working Draft 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollIntoView
Experimental
Chrome Full support 29Edge Full support 17
Notes
Full support 17
Notes
Notes No support for smooth behavior.
Firefox Full support 1IE Full support 8
Notes
Full support 8
Notes
Notes No support for smooth behavior or center options.
Opera Full support 38Safari Full support 6
Notes
Full support 6
Notes
Notes No support for smooth behavior or center options.
WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 5
Notes
Full support 5
Notes
Notes No support for smooth behavior or center options.
Samsung Internet Android Full support Yes
scrollIntoViewOptions
Experimental
Chrome Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Edge ? Firefox Full support 36
Notes
Full support 36
Notes
Notes No support for inline option.
Notes Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
IE No support NoOpera Full support 48
Notes
Full support 48
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari No support NoWebView Android Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Chrome Android Full support 61
Notes
Full support 61
Notes
Notes The block and inline options support the values start, center, end, nearest.
Firefox Android Full support 36
Notes
Full support 36
Notes
Notes No support for inline option.
Notes Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
Opera Android Full support 45
Notes
Full support 45
Notes
Notes The block and inline options support the values start, center, end, nearest.
Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

相关内容

文档标签和贡献者

此页面的贡献者: 1v9, lujjjh, mdnwebdocs-bot, Capasky, kangsunlei, luojia, teoli, xuluxi
最后编辑者: 1v9,