原生js实现下拉到底事件
1.获取三个高度页面滚动距离、文档总高度、浏览器视口高度
//滚动条在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; return scrollTop; } //文档的总高度 function getScrollHeight() { var scrollHeight = 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; return scrollHeight; } //浏览器视口的高度 function getWindowHeight() { var windowHeight = 0; if (document.compatMode == "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } return windowHeight; }
2. 页面滚动至视口高度+页面Y轴滚动距离大于文档总高度 - 20px时触发ajax事件
window.onscroll = function() { if (getScrollTop() + getWindowHeight() >= getScrollHeight() - 20) {
loadAjax();
} };