JQuery检测底部滚动答案

【问题标题】：JQuery Detect Scroll at BottomJQuery检测底部滚动
【发布时间】：2012-01-03 10:49:30
【问题描述】：

我希望在用户滚动到页面底部时实现内容加载。

我遇到了问题。它在桌面浏览器上运行良好，但在移动设备上却不行。我已经实施了一个肮脏的修复，使它可以在 iPhone 上运行，但不是最佳的，因为它不能在其他尺寸的移动设备上运行。

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

问题是在移动设备上添加滚动和高度不等于高度，而在桌面浏览器上却是这样。

有没有办法检测移动浏览器？

提前致谢。

下面是当前使用的代码：

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

【问题讨论】：

目标是为移动设备节省带宽吗？
不，目前我有一个 javascript 可以检测移动设备的用户代理，并执行某个代码，该代码不是 100%，只能在 iphone 上运行，否则它会执行适用于所有桌面浏览器的普通代码

标签： jquery

【解决方案1】：

您是否为 iphone 添加了元标记，用于将内容大小设置为手机的视口？

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

编辑：

所以我在我的手机（安卓、姜饼）上尝试了这个，问题不在于代码不起作用，而是显示的内容不会强制页面滚动。一旦我放大并向下滚动，就会动态加载更多内容。您可以尝试添加内容，直到添加的内容大于 $(window).height();

【讨论】：

我现在将尝试添加元标记。我已经解决了没有足够内容的问题，首先检查 $(document).height() == $(window).height()，如果是，一次加载内容 3 直到它们不相等

【解决方案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)
    );
}

【讨论】：

@qwertymk 我很确定这是一种在所有浏览器上获取文档高度（包括移动浏览器）的防弹方法。我没有指定这是从一堆数字中获取最大值的防弹方法:) 在您使用网络浏览器的任何内容中检查此 jsFiddle，您将获得正确的数字：jsfiddle.net/z5BM8

【解决方案3】：

对于以后看这里的任何人，我通过将 height=device-height 添加到 meta 视口标签来解决这个问题：

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

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

这适用于 iOS 5

【讨论】：

大家好，尼克说的是我也在与我在下面提到的插件一起做的事情
谢谢，我有一段时间试图找到解决方案。这行得通。
仅供参考：如果文档按比例缩小（用户缩小），jQuery 实际上会为 $(window).height() 返回错误的高度，所以我不得不使用 window.innerHeight存在，否则退回到 $(window).height()

【解决方案4】：

您还可以使用无限滚动插件：https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

我正在使用无限滚动，它在我的笔记本电脑和 iPhone 上运行良好

【讨论】：

【解决方案5】：

如果可以的话，你真的应该避免尝试准确的数字。

使用上面Stelok的函数，你可以这样测试：

if ($win.height() + $win.scrollTop() > (getDocumentHeight()-10)) {

它有点柔和 - 用户可能没有完全滚动到确切的最后一个像素，但认为他/她在底部。

【讨论】：

老兄，说真的，你是我的明星......摇滚明星......现在对我来说是名人。你救了我……谢谢（百万）^百万。

【解决方案6】：

以下是对我非常有用的其他答案的汇总。有时也可以写成 jQuery 插件。

// Handles scrolling past the window up or down to refresh or load more data.
var scrolledPastTop = false;
var scrolledPastBottom = false;
var scrollPrevious = 0;

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

function bottomScrollRefresh(callback) {
  var pastBottom = $window.height() + $window.scrollTop() > getDocumentHeight();
  if(!scrolledPastBottom && pastBottom) {
    callback($window.height() + $window.scrollTop());
    scrolledPastBottom = true;
  } else {
    if(!pastBottom) scrolledPastBottom = false;
  }
  scrollPrevious = $window.scrollTop();
}

function topScrollRefresh(callback) {
  var pastTop = $window.scrollTop() < scrollPrevious && $window.scrollTop() <= 0;
  if(!scrolledPastTop && pastTop) {
    callback($window.scrollTop());
    scrolledPastTop = true;
  } else {
    if(!pastTop) scrolledPastTop = false;
  }
  scrollPrevious = $window.scrollTop();
}

要在您的代码中使用它，请添加如下内容：

window.onscroll = function() {
  topScrollRefresh(function(pos) {
      console.log("Loading top. " + pos);
  });
  bottomScrollRefresh(function(pos) {
    console.log("Loading bottom. " + pos);
  });
};

非常适合我的 PhoneGap/Cordova 应用。

【讨论】：

【解决方案7】：

改进的 jQuery 版本的代码

var scrollRefresh = {
    pastTop: false,
    pastBottom: false,
    previous: 0,
    bottom: function(callback) {
      var pBottom = $(window).height() + $(window).scrollTop() >= $(document).height();
      if(!this.pastBottom && pBottom) {
        callback($(window).height() + $(window).scrollTop());
        this.pastBottom = true;
      } else {
        if(!pBottom) this.pastBottom = false;
      }
      this.previous = $(window).scrollTop();
    },
    top: function(callback) {
      var pTop = $(window).scrollTop() < this.scrollPrevious && $(window).scrollTop <= 0;
      if(!this.pastTop && pTop) {
        callback($(window).scrollTop());
        this.pastTop = true;
      } else {
        if(!pTop) this.pastTop = false;
      }
      this.previous = $(window).scrollTop();
    }
  }

  $(window).scroll(function() {
    scrollRefresh.top(function(pos) {
      console.log("Loading top. " + pos);
      alert("scrolled to top"); //You should delete this line
    });
    scrollRefresh.bottom(function(pos) {
      console.log("Loading bottom. " + pos);
      alert("scrolled to bottom"); //You should delete this line
    });
  });

【讨论】：

您需要将 var pTop 替换为： var pTop = $(window).scrollTop()

【解决方案8】：

这对我有用：

(window.innerHeight + window.scrollY) == $(document).height()

在这里找到： Javascript: How to detect if browser window is scrolled to bottom?

【讨论】：

【解决方案9】：

在下面使用 jquery 和 Strelok 的 getDocumentHeight()（干杯！）我发现以下工作非常好。相等性测试对我不起作用，因为 iPhone 仅在幻灯片末尾注册了一个滚动值，该值实际上大于文档高度：

$(window).scroll(function () {
  var docHeight = getDocumentHeight();         
  if ($(window).scrollTop() + $(window).height() >= docHeight) {
    // Do stuff
  }
});

【讨论】：

【解决方案10】：

尽管这个问题是在 5 年前提出的，但在今天的 UI/UX 环境中，它仍然具有更多的相关性。我想加两分钱。

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
    // element is at the end of its scroll, load more content
}

来源：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

【讨论】：