iphone - 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 上都没有被检测到，我认为这与它的视口(viewport)有关，但谁知道呢。

我尝试使用视口(viewport)高度方法

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

但这似乎也没有解决问题!

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

谢谢!!

欧文

Answer 1

经过多年的调试，我发现

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

从未真正得到满足，好吧，它已经得到满足，但似乎移动 safari 在视口(viewport)移动时不运行任何 javascript。

这意味着除非您完全在文档高度上停止滚动(没有弹性底部的东西)，否则不太可能等于相同的高度。

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

所以修复方法如下

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

它现在就像一个魅力!