JQuery检测滚动底部

Question

我希望在用户滚动到页面底部时实现内容加载。

我有问题。它适用于桌面浏览器，但不适用于移动设备。我实施了一个肮脏的修复程序，使其在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() <= 1278) { 
        // At the moment only works on iPhone 
       } 
      } 
     } 
     else { 
      $(window).scroll(function() { 
       if ($(window).scrollTop() + $(window).height() >= $(document).height()) {      
        // Works perfect for desktop browsers 
       } 
      }) 
     } 
}) 

Answer 1

对于任何人谁看这里后，我解决了这个加height=device-height到meta视标签：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 

你可以然后继续使用$(document).scroll(function(){});

这与iOS 5工作

Answer 2

您已经添加了iPhone手机的元标签，该标签将内容大小到手机的视口？

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

编辑：

所以，我想这是我的手机（Android的姜饼）上的问题是没有这么多不工作它显示的内容不强制页面滚动的代码。只要我放大并动态加载更多内容。您可以尝试添加内容，直到添加的内容大于$（window）.height（）;

Answer 3

防弹的方式来获得文件的高度在所有浏览器：

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) 
    ); 
} 

Answer 4

你也可以使用无限滚动的插件：https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

我使用的是无尽的滚动，它在我的笔记本电脑和iphone

Answer 5

的伟大工程

如果可以的话，你应该避免尝试击中确切的数字。

使用上述Stelok的功能，你可以测试这样的：

if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) { 

这是一个有点软 - 用户可能不会很滚动到确切的最后一个像素，但认为他/她是在底部。

Answer 6

下面是其他答案的总和，这对我来说效果很好。它可以在某个时候写成一个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 /科尔多瓦应用程序的伟大工程。

Answer 7

一种改进代码的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 
    }); 
    }); 

Answer 8

这是对我工作：

(window.innerHeight + window.scrollY) == $(document).height() 

这里找到： Javascript: How to detect if browser window is scrolled to bottom?

Answer 9

使用jQuery和下面Strelok的getDocumentHeight()（干杯！ ）我发现以下工作非常好。平等的测试并没有为我工作的iPhone只能在这实际上比原稿的高度越大，幻灯片结束注册的滚动值：

$(window).scroll(function() { 
    var docHeight = getDocumentHeight();   
    if ($(window).scrollTop() + $(window).height() >= docHeight) { 
    // Do stuff 
    } 
}); 

Answer 10

虽然有人问5年前，它还是在今天的用户界面/用户体验环境中更具有相关性。我想补充我的两分钱。

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