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

【问题标题】：jQuery Detect Bottom of Page on Mobile Safari/iOSjQuery 在移动 Safari/iOS 上检测页面底部
【发布时间】：2012-06-23 20:56:35
【问题描述】：

我基本上想要与 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 上检测页面底部的信息！

谢谢！！

欧文

【问题讨论】：

标签： iphone scroll detect

【解决方案1】：

经过多年的调试，我发现

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

实际上从来没有遇到过，好吧它遇到过但是似乎移动 safari 在视口移动时不运行任何 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);
                });
                }
             }
        });
});

它现在就像一个魅力！

【讨论】：

【解决方案2】：

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

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

然后……

$(window).scroll(function() {
     var docHeight = getDocumentHeight();
     if($(window).scrollTop() + window.innerHeight == docHeight)
                 {
                      // enter your code here
                 }
        });

也不要忘记视口元数据：

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

【讨论】：

想补充一个很好的关于高度和卷轴的知识来源javascript.info/size-and-scroll-window

【解决方案3】：

我遇到了同样的问题。代码 sn-p 在桌面上运行良好，但在 iOS 移动设备上运行良好。将document 替换为body 后，问题已修复。另外，最好检查一下您是否在屏幕底部附近：

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

【讨论】：

【解决方案4】：

此解决方案适用于所有设备：

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

【讨论】：