element.scrollIntoView

有一个常见的需求是:把页面滚动到某一个元素处。

我一直以来的做法都是计算处该元素在页面的位置,然后设置 documentElement 的 scrollTop 或用 window.scrollTo(x, y) 来实现。

发现 DOM API 中有着一个简单的方法,并且兼容包括 IE6 等主流浏览器,那就是 element.scrollIntoView(alignWithtop) 。

从命名可知,是把对应元素滚入可视范围,可带一参数,参数类型是 boolean,true 时表示元素顶部和滚动区域的顶部对齐,false 时元素底部和滚动区域底部对齐,不带该参数和 true 的效果一致。

关于对齐,说的自然是尽可能对齐,当无法再滚时,不会拉伸页面来强行对齐。

上面用「滚动区域」而不是窗口来表述对齐,说的是不单对整个页面的滚动可用,也对页面别的有滚动条的元素生效。当对某一元素应用该方法时,从最内层的滚动区域开始调整 scrollTop,没进入可视范围,再继续调整外层滚动区域的 scrollTop 。

一个 demo

References

5条评论

      1. 同意啊,除非商业化,客户特别要求,否则谁会理IE6这东西。

  1. 有空我得测试下现在的Chrome是否已支持此方法,原是不支持的吧??博主

    1. chrome 1.0 就支持了,文中的第一个参考链接页面的底部有浏览器支持情况统计

评论已关闭。