PHP结合jQuery/Ajax实现无限滚动系统加载异常求助

问题1：滚动触发条件逻辑存在兼容性问题 #

你当前使用的document.body.scrollHeight == document.body.scrollTop + window.innerHeight判断存在两个缺陷：

• 不同浏览器滚动高度属性存在差异，Chrome等webkit内核浏览器中document.body.scrollTop常返回0，需兼容document.documentElement.scrollTop
• 全等判断对像素误差容忍度极低，滚动时很难精准匹配到相等的情况，基本无法触发

修复代码： #

// 替换原来的if判断条件
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if ((scrollTop + window.innerHeight >= scrollHeight - 100) && noMorePosts == 'false') {
  // 原有AJAX逻辑保留
}

同时删除scroll事件末尾的return false，该行代码会干扰正常滚动行为。 #

问题2：PHP循环逻辑存在死循环隐患，数据输出异常 #

你当前的$cnt++放在循环末尾，遇到账号关闭、跳过起始条数的continue场景时，$cnt不会自增，会导致循环卡在同一条数据无法继续执行。

修复代码： #

把$cnt++移到while循环的第一行：

$cnt = 0;
while($cnt < count($this->data())) {
    $cnt++; // 移到这里，不管后续逻辑如何都先自增
    // 原有循环内逻辑保留，删除原来末尾的$cnt++
}

问题3：AJAX请求路径与实际接口不匹配 #

你提供的PHP接口文件名为load_posts.php，但JS代码中请求的路径为includes/handlers/ajax_load_posts.php，文件名不匹配会导致请求404无法获取数据。

修复方案： #

核对接口文件的实际路径和文件名，把JS中AJAX请求的url参数修改为正确的接口地址。 #

问题4：隐藏字段取值异常 #

如果首次加载返回的10条数据是最后一页，你生成的HTML里没有nextPage隐藏字段，后续JS获取.nextPage的val会返回undefined，也会导致逻辑中断。

修复方案： #

在JS获取page值时做兼容处理：

var page = $('.posts_area').find('.nextPage').val() || 2;

验证步骤 #

1. 打开浏览器控制台，切换到Network面板，滚动页面查看是否有AJAX请求发出
2. 如果有请求，查看请求返回的内容是否正常，有没有PHP报错
3. 如果没有请求，在scroll事件里加console.log调试，确认判断条件是否正常触发

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