DOM 通灵术

DOM 通灵术可以召唤某一个 DOM 节点,让它出现在当前视图中。除了常用的锚点定位,利用 focus 定位外,还有两个更为神奇的方法。

Element.scrollIntoViewIfNeeded( opt_center )

Webkit 家族的特有属性,当参数为 True 的时候,该元素会出现到它祖先滚动元素在当前视图的正中间。如果为 False,它会滚动到离它最近的一边边沿。换句话说,如果该元素在视图可见区域下方,它将出现在视图可见区域内部下方,可是区域上方亦然。若参数为空,则默认参数为 True。该特性有意思的一点是,若该元素已经可见了,就不会执行任何动作,这也是 IfNeeded 含义所在吧。

该方法不是标准规范,属性支持度如上所示,没有 Webkit 血继界限的浏览器是不支持该方法的。

Element.scrollIntoView( opt_top )

当参数为 True 的时候,该元素会出现到它祖先滚动元素在当前视图的最上方。如果为 False,它会滚动到视图最下方。若参数为空,则默认参数为 True。与 scrollIntoViewIfNeeded 不同的是,就算元素在视图中,他也会执行该方法的。


除此之外,它还可以接受一个对象作为参数。其中 block: 'start' 对应参数 Trueblock: 'end' 对应参数 Flasebehavior 参数可以指定元素出现的方式,自动,立即亦或是平滑。但这个参数目前只有 Firefox 支持,其它浏览器都只支持布尔值参数。

{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "end",
}