虽然scroll事件是在window对象上发生的，但它实际表示的则是页面中相应元素的变化。在混杂模式下，可以通过body元素的scrollLeft和scrollTop来监控到这一变化；而在标准模式下，除Safari之外的所有浏览器都会通过html元素来反映这一变化(Safari仍然基于body跟踪滚动位置)，如下面的例子所示：

<script type="text/javascript">
(function(){
  var displayViewPortSize=null;
 
  function createDisplay(){
    if(displayViewPortSize==null){
      displayViewPortSize=document.createElement("div");
      displayViewPortSize.style.cssText="position:fixed;z-index:99999;right:8px;top:8px;padding:10px;color:black;background-color:white;border:1px solid #ccc;font-family:Arial;";
      document.body.appendChild(displayViewPortSize);
    }
  }
 
  function calcScrollTop(){
    if(document.compatMode=="CSS1Compat"){
      displayViewPortSize.innerHTML="scrollTop="+document.documentElement.scrollTop;
    }else{
      displayViewPortSize.innerHTML="scrollTop="+document.body.scrollTop;
  	}
  }
 
  if(window.addEventListener){
    window.addEventListener("load",function(event){
      createDisplay();calcScrollTop();
      window.addEventListener("scroll",function(event){
        calcScrollTop();
      },false);
    },false);
  }else if(window.attachEvent){
    window.attachEvent("onload",function(event){
      createDisplay();calcScrollTop();
      window.attachEvent("onscroll",function(event){
        calcScrollTop();
      });
    });
  }
})();
</script>

以上代码指定的事件处理程序会输出页面的垂直滚动位置——根据呈现模式不同使用了不同的元素。由于Safari 3.1之前的版本不支持document.compatMode，因此旧版本的浏览器就会满足第二个条件。与resize事件类似，scroll事件也会在文档被滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单。