关于iPhone：jQuery在Mobile Safari / iOS上检测页面底部


jQuery Detect Bottom of Page on Mobile Safari/iOS

我基本上希望与Facebook，Twitter和所有其他"无限"滚动站点具有相同的功能，目前我正在使用的代码为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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上被检测到，我认为这与视口有关，但是谁知道呢。

我尝试使用

的视口高度方法

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

但是这似乎也没有解决！

因此，请大家分享一些有关如何检测iDevices页面底部的信息！

谢谢!!

欧文

调试了一段时间后，我发现了

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

从来没有真正遇到过，好吧曾经遇到过，但是似乎移动Safari并没有运行任何JavaScript，而视口却在移动。

这意味着除非您完全在文档高度上停止滚动(没有弹力的底部物体)，否则将非常有可能等于相同的高度。

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

因此修复程序在下面

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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);
                });
                }
             }
        });
});

，它现在就像魅力一样发挥作用！

多浏览器和多设备兼容的完整解决方案：

1
2
3
4
5
6
7
function getDocumentHeight() {
return Math.max(
    Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
    Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
    Math.max(document.body.clientHeight, document.documentElement.clientHeight)
);
}

然后....

1
2
3
4
5
6
7
$(window).scroll(function() {
     var docHeight = getDocumentHeight();
     if($(window).scrollTop() + window.innerHeight == docHeight)
                 {
                      // enter your code here
                 }
        });

也不要忘记视口元数据：

1
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
相关讨论

我有同样的问题。该代码段可在台式机上正常运行，但不能在iOS移动设备上运行。用body替换document后，此问题已解决。
另外，最好检查一下您是否位于屏幕底部附近：

1
if($(window).scrollTop() + $(window).height() > $('body').height() - 200)

此解决方案将在所有设备上运行：

1
2
3
4
5
6
7
8
9
10
11
12
window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset >= height) {
    console.log('at the bottom');
  }
}