一、触发机制
滚动条出现在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 获取
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。
原文：http://www.cnblogs.com/lydialee/p/4847433.html