基于Django的前端无限滚动功能失效问题求助

可能的原因及修复方案 #

1. 滚动触发条件判断偏差 #

检查JS中滚动到底部的判断逻辑，若计算精度太严格，会导致后续滚动无法触发加载。

• 错误示例：

if (document.documentElement.scrollTop + window.innerHeight >= document.documentElement.scrollHeight) {
  // 加载逻辑
}

• 修复：增加缓冲值避免浏览器渲染偏差：

if (document.documentElement.scrollTop + window.innerHeight >= document.documentElement.scrollHeight - 20) {
  // 加载逻辑
}

2. count变量逻辑异常 #

控制台显示count最大为3，优先排查：

• 确认count是否在每次加载完成后正确递增（比如count += 1而非count = 1）
• 检查是否存在if(count > 3) return这类硬限制逻辑
• 直接访问API第4页（比如/api/data/?page=4），验证后端是否还有更多数据返回

3. 分页请求参数错误 #

检查向Django API传递的分页参数：

• 确认是否将count作为页码传递（比如/api/data/?page=${count}）
• 验证后端分页配置，若每页数据量过大，3页可能已加载完所有数据
• 在控制台Network面板查看请求响应，确认是否返回空数据或错误状态码

4. 重复请求阻止逻辑未重置 #

若存在loading状态防止重复请求，需确保请求完成后重置状态：

• 错误示例：

let loading = false;
window.addEventListener('scroll', () => {
  if (loading) return;
  loading = true;
  fetch(`/api/data/?page=${count}`)
    .then(res => res.json())
    .then(data => {
      // 渲染数据
      count += 1;
      // 未重置loading，后续无法触发请求
    })
});

• 修复：在请求完成（含失败）后重置状态：

fetch(`/api/data/?page=${count}`)
  .then(res => res.json())
  .then(data => {
    // 渲染数据
    count += 1;
  })
  .catch(err => console.error(err))
  .finally(() => {
    loading = false;
  });

快速验证步骤 #

1. 在控制台手动执行count +=1并调用加载函数，判断是count逻辑还是滚动触发的问题
2. 滚动时打印document.documentElement.scrollTop + window.innerHeight和document.documentElement.scrollHeight，对比是否满足触发条件

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