Element.scrollIntoView()

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

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 初始定义

浏览器支持

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基础支持 1.0 1.0 (1.7 or earlier) 6 10.0 4
scrollIntoViewOptions 未实现 36 (36) 未实现 未实现 未实现
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基础支持 ? 1.0 (1.0) ? ? ?
scrollIntoViewOptions 未实现 36.0 (36) 未实现 未实现 未实现

相关内容

文档标签和贡献者

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