一?獲取三個高度頁面滾動距離、文檔總高度、瀏覽器視口高度
//滾動條在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();
} };