Ajax滚动触发异常：滚动至顶部生效，底部无响应求解决

我来帮你搞定这个困扰！你的问题出在滚动到底部的判断条件过于严苛，导致只有当滚动位置完全精准等于文档底部时才触发，而且还会在页面内容高度等于窗口高度时，滚动到顶部也误触发AJAX。

问题分析 #

原代码里的判断条件：

if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    loadmore();
}

这个条件要求scrollHeight - scrollPosition必须严格等于0才会执行，但浏览器的滚动计算可能因为像素精度、页面布局的微小差异，很难刚好达到完全等于0的状态。另外，如果页面初始内容高度刚好等于窗口高度，scrollPosition就是窗口高度，scrollHeight也等于窗口高度，这时候scrollHeight - scrollPosition就是0，滚动到顶部时就会触发AJAX——这就是你遇到的顶部触发、底部没反应的核心原因。

修改后的代码 #

我们调整判断条件，给一个小的容错阈值，同时加上防抖和请求锁优化，避免滚动事件频繁触发AJAX：

// 防抖函数，避免滚动过程中频繁触发请求
let debounceTimer;
$(window).scroll(function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(function() {
        const scrollHeight = $(document).height();
        const scrollPosition = $(window).height() + $(window).scrollTop();
        // 当距离底部100像素以内时触发，可根据需求调整阈值
        if ((scrollHeight - scrollPosition) <= 100) {
            loadmore();
        }
    }, 200); // 200毫秒延迟，平衡响应速度和请求频率
});

function loadmore() {
    const val = document.getElementById('row_no').value;
    const val1 = document.getElementById('user_id').value;
    // 请求锁：避免同一时间重复发送AJAX请求
    if (window.isLoading) return;
    window.isLoading = true;
    
    $.ajax({
        type: 'POST',
        url: 'getData.php',
        data: { 
            getresult: val, 
            getresult1: val1 
        },
        success: function(response) {
            const content = document.getElementById('all_rows');
            content.innerHTML += response;
            document.getElementById('row_no').value = Number(val) + 10;
        },
        complete: function() {
            // 请求完成后解锁，允许下次触发
            window.isLoading = false;
        }
    });
}

关键修改说明 #

• 宽松的滚动判断：用<= 100替代严格等于0，给滚动计算留出容错空间，确保滚动到底部附近时就能触发AJAX。你可以根据需求调整这个阈值（比如改成0也能正常工作，但留一点阈值体验更流畅）。
• 防抖机制：滚动事件会每秒触发数十次，防抖函数让AJAX只在滚动停止后一段时间才执行，避免不必要的重复请求。
• 请求锁：防止在AJAX请求未完成时，再次滚动触发重复请求，避免数据重复加载或给服务器造成额外压力。

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