scrollTop事件的优化以及scrollTop的兼容性

scroll事件，当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。

虽然scroll事件是在window对象上发生，但他实际表示的则是页面中相应元素的变化。在混杂模式（document.compatMode的值为BackCompat）下，可以通过<body>元素的scrollLeft和scrollTop来监控到这一变化。

而在标准模式（document.compatMode的值为CSS1Compat）下，除Safari之外的所有浏览器都会通过<html>元素来反应这一变化。

以上内容来自《Javascript 高级程序设计（第三版）》。

混杂模式下，chrome、IE、Firefox都是通过document.body.scrollTop监听滚动条的位置。
标准模式下，chrome通过document.body.scrollTop监听滚动条位置，IE和Firefox通过document.documentElement.scrollTop监听滚动条位置

function outPutScrollTop() {
        console.log(document.compatMode);
        if(document.compatMode === 'CSS1Compat') {
            console.log(document.documentElement.scrollTop + '标准模式');
            console.log(document.body.scrollTop + '标准模式');
        } else {
            console.log(document.body.scrollTop + '混杂模式');
        }
    }
    // 绑定监听
    window.addEventListener('scroll', outPutScrollTop);