JQuery Detect Scroll at Bottom
我希望在用户滚动到页面底部时实现内容加载。
我遇到了问题。 它适用于桌面浏览器，但不适用于移动设备。 我已经实现了一个脏修复程序，使其在iPhone上运行，但不是最佳，因为它不适用于其他大小的移动设备。
我的网站是www.cristianrgreco.com，向下滚动以查看效果
问题是添加滚动并且高度不等于移动设备上的高度，而它们在桌面浏览器上执行。
有没有办法检测移动浏览器？
提前致谢。
以下是当前使用的代码：
$(document).ready(function () { $(".main").hide().filter(":lt(3)").show(); if ($(document).height() == $(window).height()) { // Populate screen with content } else if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) { window.onscroll = function () { if ($(document).height() - $(window).scrollTop() = $(document).height()) { // Works perfect for desktop browsers } }) } }) 对于以后看过这里的人，我通过在meta视口标记中添加height=device-height来解决这个问题：
然后，您可以继续使用$(document).scroll(function(){});
这适用于iOS 5
如果可以的话，你应该真的避免尝试命中一个确切的数字。
使用上面的Stelok函数，您可以像这样测试：
if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) {
它有点软 – 用户可能没有完全滚动到最后一个像素，但认为他/她在底部。
一个改进的jQuery版本的代码
var scrollRefresh = { pastTop: false, pastBottom: false, previous: 0, bottom: function(callback) { var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height(); if(!this.pastBottom && pBottom) { callback($(window).height() + $(window).scrollTop()); this.pastBottom = true; } else { if(!pBottom) this.pastBottom = false; } this.previous = $(window).scrollTop(); }, top: function(callback) { var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0; if(!this.pastTop && pTop) { callback($(window).scrollTop()); this.pastTop = true; } else { if(!pTop) this.pastTop = false; } this.previous = $(window).scrollTop(); } } $(window).scroll(function() { scrollRefresh.top(function(pos) { console.log("Loading top. " + pos); alert("scrolled to top"); //You should delete this line }); scrollRefresh.bottom(function(pos) { console.log("Loading bottom. " + pos); alert("scrolled to bottom"); //You should delete this line }); });
这对我有用：
(window.innerHeight + window.scrollY) == $(document).height()
在这里找到： Javascript：如何检测浏览器窗口是否滚动到底部？
在所有浏览器上获取文档高度的防弹方法：
function getDocumentHeight() { return Math.max( Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), Math.max(document.body.clientHeight, document.documentElement.clientHeight) ); }
下面使用jquery和Strelok的getDocumentHeight() （欢呼！）我发现以下工作得很好。 测试相等性对我来说不起作用，因为iPhone仅在幻灯片末尾注册了滚动值，实际上大于文档高度：
$(window).scroll(function () { var docHeight = getDocumentHeight(); if ($(window).scrollTop() + $(window).height() >= docHeight) { // Do stuff } });
您是否为iphone添加了元标记，将内容大小设置为手机的视口？
编辑：
所以我在手机上尝试了这个（android，gingerbread），问题不在于代码不能正常工作，因为显示的内容不会强制页面滚动。 一旦我放大并向下滚动更多动态加载的内容。 您可以尝试添加内容，直到添加的内容大于$（窗口）.height（）;
你也可以使用无尽的滚动插件： https ： //github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll
我正在使用无尽的卷轴，它在我的笔记本电脑和iPhone上运行良好
以下是其他答案的汇总，对我来说效果很好。 它有时可以写成jQuery插件。
// Handles scrolling past the window up or down to refresh or load more data. var scrolledPastTop = false; var scrolledPastBottom = false; var scrollPrevious = 0; function getDocumentHeight() { return Math.max( Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), Math.max(document.body.offsetHeight, document.documentElement.offsetHeight), Math.max(document.body.clientHeight, document.documentElement.clientHeight) ); } function bottomScrollRefresh(callback) { var pastBottom = $window.height() + $window.scrollTop() > getDocumentHeight(); if(!scrolledPastBottom && pastBottom) { callback($window.height() + $window.scrollTop()); scrolledPastBottom = true; } else { if(!pastBottom) scrolledPastBottom = false; } scrollPrevious = $window.scrollTop(); } function topScrollRefresh(callback) { var pastTop = $window.scrollTop() < scrollPrevious && $window.scrollTop() <= 0; if(!scrolledPastTop && pastTop) { callback($window.scrollTop()); scrolledPastTop = true; } else { if(!pastTop) scrolledPastTop = false; } scrollPrevious = $window.scrollTop(); }
要在代码中使用它，请添加如下内容：
window.onscroll = function() { topScrollRefresh(function(pos) { console.log("Loading top. " + pos); }); bottomScrollRefresh(function(pos) { console.log("Loading bottom. " + pos); }); };
适用于我的PhoneGap / Cordova应用程序。
尽管问题是在5年前提出的，但在今天的UI / UX环境中仍然存在相关问题。 我想补充两分钱。
var element = document.getElementById('flux'); if (element.scrollHeight - element.scrollTop === element.clientHeight) { // element is at the end of its scroll, load more content }
资料来源： https ： //developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled