scroll的相关属性及其兼容性

• 1. 各浏览器对 document、document.body、document.documentElement 对象的 onscroll 事件支持情况

依次为 window、HTMLDivElement、document、document.body、document.documentElement 对象绑定 scroll 事件监听器，最终可以汇总为下表：

	IE6		IE7		IE8		Firfox		Chrome		Safari		Opera
	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S
window 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
div 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document 对象	N	N	N	N	N	N	Y	Y	Y	Y	Y	Y	N	N
document.body 对象	Y	N	Y	Y	Y	N	N	N	N	N	N	N	Y	Y
document.documentElement 对象	N	Y	N	Y	N	Y	N	N	N	N	N	N	N	N

window、HTMLDivElement的scroll事件，都支持：

window.onscroll = function(){}

document.getElementById("div1").onscroll = function() {}

• 2. scrollTop获取

window的scrollTop

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

IE6/7/8/9/10：
对于没有doctype声明的页面里可以使用 document.body.scrollTop来获取scrollTop高度 ；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ；
Safari:
safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；
Firefox:
火狐等直接用 document.documentElement.scrollTop ；

documentElement的scrollTop

document.getElementById("myDIV").scrollTop  //取值

document.getElementById("myDIV").scrollTop = 10;  //赋值

• 3. pageXOffset 和 pageYOffset属性返回当前文档相对于window的水平和垂直距离。等同于scrollX 和 scrollY.

IE9及以上支持，且只读。

window.pageXOffset
window.pageYOffset

• 4. scrollHeight获取（元素包含padding在内的整体高度）

确保读取 scrollHeight 属性的元素均创建了新的 block formatting context，或者此容器与内部子容器处于同一文档流中，以此避免各浏览器中读数不同。

• 5. scrollTo

window.scrollTo(xpos, ypos)
window.scrollBy(100, 0); // 向右侧滚动100px

• 6. 元素 id=”content” Scroll进入可视区域:

document.getElementById("content").scrollIntoView();