原生JS实现下拉事件

一 获取三个高度页面滚动距离、文档总高度、浏览器视口高度

//滚动条在Y轴上的滚动距离

function getScrollTop() { 

    var  scrollTop = 0, bodyScrollTop= 0,

           documentScrollTop= 0;

    if (document.body) {

          bodyScrollTop=document.body.scrollTop;

} ；

    if (document.documentElement) {

        documentScrollTop=document.documentElement.scrollTop;

    }

    scrollTop= (bodyScrollTop - documentScrollTop > 0) ?bodyScrollTop :       documentScrollTop;returnscrollTop;

}

//文档的总高度

   function getScrollHeight() {

         varscrollHeight = 0,

         bodyScrollHeight= 0,

         documentScrollHeight= 0;if(document.body) {

         bodyScrollHeight=document.body.scrollHeight;

   }

   if (document.documentElement) {

         documentScrollHeight=document.documentElement.scrollHeight;

   }

    scrollHeight= (bodyScrollHeight - documentScrollHeight > 0) ?bodyScrollHeight :       documentScrollHeight;returnscrollHeight;

}

//浏览器视口的高度

    function getWindowHeight() {

         varwindowHeight = 0;if(document.compatMode == "CSS1Compat") {

         windowHeight=document.documentElement.clientHeight;

} else{

         windowHeight=document.body.clientHeight;

}

    returnwindowHeight;

}

二 页面滚动至视口高度+页面Y轴滚动距离大于文档总高度 - 20px时触发ajax事件

    window.onscroll =function() {if(getScrollTop() + getWindowHeight() >= getScrollHeight() - 20) {

loadAjax();

} };