一、触发机制
滚动条出现在body上，触发window上的scroll事件，如果滚动条出现在div上，则会触发div.onscroll 不会触发window.onscroll
<div id="rightDiv" > <div id="header"></div> <div id="nav">nav</div> <div id="list">list</div> </div>
var scrollDiv = document.getElementById('rightDiv'); scrollDiv.onscroll = scrollEvt; window.onscroll = winScroll; function winScroll(){ console.log('window scroll'); //不会触发 } function scrollEvt(){ console.log('scroll'); //触发 }
二、scrollTop 获取
1、IE：声明了doctype时，scrollTop在documentElement上；
未声明doctype时，情况较复杂：
IE10、11：使用两种方法获取都可以：documentElement和body
IE789：使用documentElement.scrollTop
IE5：使用body.scrollTop
注：IE9及以上才支持pageYOffset
IE不支持scrollY。FF和Chrome支持scrollY、pageYOffset
2、FF：声明doctype时，使用documnet.documentElement.scrollTop；
未声明doctype时，使用document.body.scrollTop获取
3、Chrome：不管声明doctype与否，scrolltop都在body上
window.pageYOffset (Safari)
兼容性的写法：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
具体测试如下：
DTD相关说明：
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，可以使用如下代码：
var scrollTop = window.pageYOffset //用于FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。