JS 获取滚动距离 滚动条高度 判断是否滚动到底部

原生JS实现

//滚动条滚动的距离：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(patMode == "CSS1Compat") windowHeight = document.documentElement.clientHeight;else windowHeight = document.body.clientHeight;return windowHeight;}function arriveBottom(){if(getScrollTop() + getWindowHeight() == getScrollHeight()) return true;else return false;};

JQuery实现

var scrollTop = $(this).scrollTop();var scrollHeight = $(document).height();var windowHeight = $(this).height();if(scrollTop + windowHeight == scrollHeight){alert("已经到最底部");}

红框是scrollTop，紫框是windowHeight，绿框是scrollHeight

参考：/winyh/p/6715010.html