jQuery在移动Safari/iOS上检测页面底部

Question

我基本上想要与facebook,twitter和所有其他"无限"滚动网站相同的功能,我现在使用的代码是

jQuery(document).ready(function(){
    $ = jQuery;
        $(window).scroll(function(){
            if ($('.iosSlider').is(':visible'))
            {
                if($(window).scrollTop() + $(window).height() == $(document).height())
                {
                $.get('/our-work/fakework.php', function(data) {
                $('#mobile-thumbs').append(data);
                });
                }
             }
        });
});

这可以在所有桌面浏览器上完美运行,甚至在我的黑莓手机上也可以在垃圾邮件向下滚动按钮后工作.

然而,它曾经没有在iphone或ipad上被检测到,我认为它与视频上的东西有关,但是谁知道.

我尝试使用视口高度方法

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

但这似乎也没有解决它!

所以请关于如何在iDevices上检测页面底部,请有人分享一些信息!

谢谢!!

欧文

Answer 1

经过多年的调试,我发现了这一点

if($(window).scrollTop() + $(window).height() == $(document).height())

从来没有真正得到满足,好吧它已经满足,但似乎移动safari没有运行任何javascript WHILST视口正在移动.

这意味着除非你在文件高度上完全停止滚动(没有弹性底部物体),否则它将非常不可能达到相同的高度.

所以我只是将代码改为而不是等于相同的高度,以检查它是否相等或更多,这样即使它已经滚动过去也会触发!

所以解决方法如下

if($(window).scrollTop() + $(window).height() >= $(document).height()){

所以修改后的代码现在看起来像

jQuery(document).ready(function(){
    $ = jQuery;
        $(window).scroll(function(){
            if ($('.iosSlider').is(':visible'))
            {
                if($(window).scrollTop() + $(window).height() >= $(document).height())
                {
                $.get('/our-work/fakework.php', function(data) {
                $('#mobile-thumbs').append(data);
                });
                }
             }
        });
});

它现在的工作就像一个魅力!