jQuery检测底部的滚动

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)

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

我有个问题。它在桌面浏览器上运行得很好,但在移动设备上却不行。我已经实现了使它在iPhone上工作,但不是最优的,因为它不能在其他大小的移动设备上工作。

我的网站是www.crictianrgreco.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
                }
            })
        }
})
提问于
用户回答回答于

对于任何稍后在这里查看的人,我通过添加以下内容来解决这个问题height=device-heightmetaviewport标签:

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

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

这对iOS 5起了作用。

用户回答回答于

如果可以的话,你真的应该避免试图达到一个确切的数字。

使用上面的Stelok函数,你可以这样进行测试:

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

扫码关注云+社区

领取腾讯云代金券