jQuery底部的检测滚动

问题描述

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

I wish to achieve content load when the user scrolls to the bottom of the page.

我有问题.它在台式机浏览器上运行良好，但在移动设备上却无法运行.我已经实施了一个肮脏的修复程序，以使其可以在iPhone上使用，但并不是最佳选择，因为它无法在其他尺寸的移动设备上使用.

I am having a problem. It works fine on desktop browsers but not on mobile. I have implemented a dirty fix to make it work on the iPhone, but is not optimal as it won't work on other sized mobile devices.

我的网站是www.cristianrgreco.com，向下滚动以查看效果

My website is www.cristianrgreco.com, scroll down to see the effect in action

问题在于添加滚动条和高度不等于移动设备上的高度，而它们在桌面浏览器上却相同.

The problem is adding the scroll and the height do not equal the height on mobile devices, whereas they do on desktop browsers.

是否可以检测移动浏览器?

Is there a way to detect for mobile browsers?

先谢谢了.

以下是当前使用的代码:

Below is the code currently being used:

$(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
                }
            })
        }
})

推荐答案

对于以后在这里看的任何人，我都通过在meta视口标记中添加height=device-height来解决此问题:

For anyone who looks here later, I solved this by adding height=device-height to the meta viewport tag:

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

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

这适用于iOS 5

这篇关于jQuery底部的检测滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！