全屏滚动的错觉

1. 先将下面标签、样式以及事件写好，运行之后滚动屏幕控制台正常输出。

<div id="container"></div>

html, body {height: auto; overflow: auto;}
#container {height: 1000px; overflow: auto;}

$(document).scroll(function(){
    console.log("document is scrolling");
});

1. 将样式稍作修改如下，再次运行并滚动屏幕，控制台并无输出。

html, body {height: 100%; overflow: auto;}
#container {height:1000px; overflow: auto;}

1. 其实分析起来原因很简单，就是html,body的高度限制为屏幕高度（作全屏经常使用的样式），所以#container高度超过屏幕高度后就产生滚动条，其height体现在scrollHeight(DOM节点的属性)。所以屏幕的滚动实际上是#container内部的滚动，所以也就没有触发document的滚动事件。