Firefox Quantum 与 jQuery 滚动加载存在兼容问题吗？

我太懂这种浏览器兼容性的坑了！你用的那段滚动触发代码在Safari正常，但Firefox时灵时不灵，核心问题出在严格相等的判断条件上。

问题根源 #

Firefox Quantum在计算页面滚动高度、窗口高度时，会保留亚像素级的精度（比如1000.3px这种小数），而$(document).height()返回的可能是取整后的值。这就导致$(window).scrollTop() + $(window).height()和$(document).height()几乎很难严格相等，自然会出现触发不稳定的情况。而Safari的高度计算逻辑做了取整处理，所以严格相等的条件更容易满足。

修复方案 #

1. 给判断条件加容差（最简单的修复）

把严格相等改成大于等于减去一个小的容差值，允许几像素的误差，这样就能避开小数精度的问题：

$(document).ready(function () {
    $(window).scroll(function() {
        // 允许5像素的误差，可根据需求调整
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 5) {
            // 这里放你的AJAX加载逻辑
        }
    });
});

2. 兼容多浏览器的文档高度计算（更严谨）

不同浏览器对文档高度的原生计算方式有差异，用原生API多维度取最大值，能进一步提升兼容性：

$(document).ready(function () {
    $(window).scroll(function() {
        const scrollTop = $(window).scrollTop();
        const windowHeight = $(window).height();
        // 兼容所有浏览器的文档高度计算
        const documentHeight = Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        );

        // 同样加容差避免精度问题
        if(scrollTop + windowHeight >= documentHeight - 5) {
            // AJAX加载逻辑
        }
    });
});

3. 增加加载锁（避免重复请求）

额外提个小优化：滚动事件会频繁触发，最好加个加载锁，防止用户快速滚动时多次发起AJAX请求：

$(document).ready(function () {
    let isLoading = false; // 加载状态锁

    $(window).scroll(function() {
        if(isLoading) return; // 正在加载时直接返回

        const scrollTop = $(window).scrollTop();
        const windowHeight = $(window).height();
        const documentHeight = Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        );

        if(scrollTop + windowHeight >= documentHeight - 5) {
            isLoading = true;
            // 发起AJAX请求
            $.ajax({
                url: '你的接口地址',
                // 其他请求参数
                success: function(data) {
                    // 处理返回的数据，比如追加到页面
                    isLoading = false; // 加载完成解锁
                },
                error: function() {
                    // 错误处理，也要解锁避免卡死
                    isLoading = false;
                }
            });
        }
    });
});

这些调整后，应该就能在Firefox和其他浏览器里稳定触发底部加载了！

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