JQuery Detect Scroll at Bottom

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到metaviewport标签解决了这个问题:

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

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

这适用于iOS 5