为什么文档/窗口高度和scrollTop()值在使用jQuery的移动浏览器中不同？

Question

我使用滚动事件（jQuery）在到达页面底部后加载更多项目：

$(window).on('scroll', function() {
    if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
        // Load more items
    }
}

它在我的桌面上运行完美，但在移动浏览器中不起作用，因为页面底部的值不匹配。例如

$(window).scrollTop() == 1056

但是

( $(document).height() - $(window).height() ) == 1152

在任何移动浏览器的页面底部（我使用的是 Android）。不确定是否与此有关，但显然在移动浏览器中，这些值是带有多达 10 个小数点的浮点数，尽管在页面底部时这些值毕竟是整数。

将桌面浏览器大小调整为移动屏幕尺寸不会重现此问题，因此这绝对是移动浏览器的问题。我目前正在使用古老的 jQuery 2.1.1，但如果任何新版本有解决此问题的可行解决方案，我可能会尝试一下。

为什么这些值在移动浏览器上不同？如何使用 jQuery / JavaScript 让我的脚本在移动浏览器中也能工作？

Answer 1

我通过获取

window.innerHeight

 而不是 

$(window).height()

 属性解决了这个问题。为了考虑移动浏览器为 

.scrollTop()

 生成的浮点值，我使用 

Math.round()

 将数字四舍五入到最接近的整数。当值变得足够大导致滚动事件无法注册时，

Math.floor()

会产生微小的差异。

我的脚本现在如下所示：

$(window).on('scroll', function() {
    if (Math.round($(window).scrollTop()) == ($(document).height() - window.innerHeight)) {
        // Load more items
    }
}

适用于移动和桌面浏览器。