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，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
  • 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
scrollIntoViewOptions
一个boolean或一个带有选项的object：
{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}
如果是一个boolean, true 相当于{block: "start"}，false 相当于{block: "end"}

示例

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

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

注意

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

标准

标准 状态 注释
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] 不支持设置项的值 "nearest" 或 "center"。

相关内容

文档标签和贡献者

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