Element.scrollIntoView()

跳转到：
  1. 语法
  2. 示例
  3. 注意
  4. 标准
  5. 浏览器支持
  6. We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! Desktop Mobile
  7. 相关内容

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

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"之一。默认为 "center"。
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 初始定义

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基础支持 29 1.0 (1.7 or earlier) 8[1] 38 5.0[1]
scrollIntoViewOptions 61[2] 36 (36)[3][4] 未实现 48[2] 未实现
特性 Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基础支持 (Yes) 1.0 (1.0) 未实现 ? ?
scrollIntoViewOptions 61[2] 36.0 (36) 未实现 未实现 48

 

[1] 不支持 "smooth" 属性 和 "center" 设置项.

[2] 设置项 "block" 及 "inline" 支持的值有："start", "center", "end", "nearest".

[3] 不支持 "inline" 设置项。

[4] 不支持"block" 设置项的值 "nearest" 或 "center"（参见 bug 1389274）。

相关内容

文档标签和贡献者

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