移动端浏览器中document/window高度与scrollTop值不符的原因及解决

我用jQuery的scroll事件实现滚动到底部加载更多，代码如下：

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

桌面端正常，但安卓移动端浏览器完全无效。滚动到底部时数值不匹配：比如scrollTop是1056，而$(document).height() - $(window).height()是1152。移动端里这些值是带多位小数的浮点数，但滚动到底部时又都是整数。把桌面窗口调成移动端尺寸也复现不了，当前用jQuery 2.1.1，也可以尝试新版本。想问为什么移动端数值有差异，怎么让脚本正常运行？

为什么移动端会出现数值差异？ #

• 移动端浏览器的滚动计算逻辑和桌面端不同，部分安卓浏览器会结合**设备像素比（DPR）**做缩放处理，导致文档高度、滚动位置等数值带有浮点精度，但实际滚动触发时scrollTop可能被自动取整，两者精度保留规则不一致，直接用严格相等判断就会失效。
• jQuery 2.1.1版本在移动端DOM尺寸计算的兼容性上存在局限，新版本jQuery针对这类场景做了逻辑优化，但核心问题还是严格相等的判断条件过于苛刻。

修复方案（多种可选） #

方案1：放宽判断条件（最直接）

把严格相等==改成>=，同时给阈值留1px的误差空间，避免浮点精度导致的差一点触发的情况：

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

方案2：统一数值精度

对scrollTop和阈值都做取整处理，消除浮点差异：

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

方案3：升级jQuery版本

升级到jQuery 3.x及以上版本，新版本对移动端DOM尺寸、滚动事件的兼容性做了优化，能减少这类浮点计算差异。升级后配合方案1或2使用，稳定性更强。

额外优化：添加防抖处理

移动端滚动事件触发频率极高，加个防抖函数避免重复触发加载逻辑：

var loadMoreDebounce;
$(window).on('scroll', function() {
    clearTimeout(loadMoreDebounce);
    loadMoreDebounce = setTimeout(function() {
        var scrollThreshold = $(document).height() - $(window).height();
        if ($(window).scrollTop() >= scrollThreshold - 1) {
            // Load more items
        }
    }, 100); // 100ms延迟可根据需求调整
});

内容的提问来源于stack exchange，提问作者user7862339