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