JavaScript高级程序设计之DOM 扩展之专有扩展之滚动第11.4.5讲

如前所述,HTML5 之前的规范并没有就与页面滚动相关的API 做出任何规定。但HTML5 在将
scrollIntoView()纳入规范之后,仍然还有其他几个专有方法可以在不同的浏览器中使用。下面列出
的几个方法都是对HTMLElement 类型的扩展,因此在所有元素中都可以调用。
scrollIntoViewIfNeeded(alignCenter):只在当前元素在视口中不可见的情况下,才滚
动浏览器窗口或容器元素,最终让它可见。如果当前元素在视口中可见,这个方法什么也不做。
如果将可选的alignCenter 参数设置为true,则表示尽量将元素显示在视口中部(垂直方向)。
Safari 和Chrome 实现了这个方法。
scrollByLines(lineCount):将元素的内容滚动指定的行高,lineCount 值可以是正值,
也可以是负值。Safari 和Chrome 实现了这个方法。
scrollByPages(pageCount):将元素的内容滚动指定的页面高度,具体高度由元素的高度决
定。Safari 和Chrome 实现了这个方法。
希望大家要注意的是,scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的

容器,而scrollByLines()和scrollByPages()影响的则是元素自身。下面还是来看几个示例吧。

//将页面主体滚动5 行
document.body.scrollByLines(5);
//在当前元素不可见的时候,让它进入浏览器的视口
document.images[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动1 页
document.body.scrollByPages(-1);
由于scrollIntoView()是唯一一个所有浏览器都支持的方法,因此还是这个方法最常用。


11.5
小结
虽然DOM 为与XML 及HTML 文档交互制定了一系列核心API,但仍然有几个规范对标准的DOM
进行了扩展。这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提
供了相同的实现。本章介绍的三个这方面的规范如下。
Selectors API,定义了两个方法,让开发人员能够基于CSS 选择符从DOM 中取得元素,这两个
方法是querySelector()和querySelectorAll()。
Element Traversal,为DOM 元素定义了额外的属性,让开发人员能够更方便地从一个元素跳到
另一个元素。之所以会出现这个扩展,是因为浏览器处理DOM 元素间空白符的方式不一样。
HTML5,为标准的DOM 定义了很多扩展功能。其中包括在innerHTML 属性这样的事实标准基
础上提供的标准定义,以及为管理焦点、设置字符集、滚动页面而规定的扩展API。
虽然目前DOM 扩展的数量还不多,但随着Web 技术的发展,相信一定还会涌现出更多扩展来。很
多浏览器都在试验专有的扩展,而这些扩展一旦获得认可,就能成为“伪”标准,甚至会被收录到规范
的更新版本中。

你可能感兴趣的:(JavaScript,js,DOM扩展,JS基础知识)