Question

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

我遇到了问题。它适用于桌面浏览器，但不适用于移动设备。我已经实现了一个脏修复程序，使其可以在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
                }
            })
        }
})

Answer 1

对于稍后查看的人，我通过将height=device-height添加到meta视口标记来解决此问题：

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

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

这适用于iOS 5

Answer 2

如果可以的话，你应该避免试图找到一个确切的数字。

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

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

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

Answer 3

改进的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
    });
  });

Answer 4

这对我有用：

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

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

Answer 5

在所有浏览器上获取文档高度的防弹方式：

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

Answer 6

使用下面的jquery和Strelok的getDocumentHeight()（欢呼！）我发现以下效果非常好。测试平等对我来说不起作用，因为iPhone只在幻灯片的末尾注册了一个滚动值，实际上大于文档高度：

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

Answer 7

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

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

编辑：

所以我在我的手机上尝试了这个（android，gingerbread），问题不在于代码不能正常工作，因为显示的内容不会强制页面滚动。一旦我放大并向下滚动更多动态加载的内容。您可以尝试添加内容，直到添加的内容大于$（窗口）.height（）;

Answer 8

你也可以使用无尽的滚动插件：https://github.com/fredwu/jquery-endless-scroll https://github.com/paulirish/infinite-scroll

我正在使用无尽的卷轴，它在我的笔记本电脑和iphone上运行良好

Answer 9

以下是其他答案的汇总，对我来说效果很好。它可以在某个时候写成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应用程序。

Answer 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

JQuery Detect Scroll at Bottom

10 个答案: