PHP本身不处理触底加载，需前端JavaScript监听滚动到底部后发起AJAX请求，PHP仅提供接收page/limit参数并返回标准JSON数据的接口，须校验参数类型与范围、避免混入HTML、终止脚本输出，并配合前端防重复请求与加载态控制。
PHP本身不处理触底加载，得靠前端JavaScript配合
PHP是服务端语言，无法监听用户滚动行为或触发“触底”事件。所谓“下拉触底自动加载”，本质是前端检测滚动到底部后，用AJAX请求PHP接口获取下一页数据，再动态插入DOM。PHP只需提供一个干净的、支持分页参数的API接口，比如返回JSON格式的列表数据。
常见错误现象：Uncaught TypeError: Cannot read property 'scrollTop' of null（前端DOM没找到）、404 Not Found（PHP路由未暴露接口）、500 Internal Server Error（PHP未校验$page参数导致SQL报错）。
- PHP接口必须接收
page和limit（或offset）参数，返回标准JSON，不要混入HTML或调试信息 - 避免在接口里直接
echo json_encode(...)后继续输出，需exit或die终止脚本 - 务必对
$_GET['page']做类型转换和范围校验，例如max(1, (int)$_GET['page'])，防止SQL注入或负数偏移
PHP分页接口要返回结构化数据，别返回HTML片段
很多开发者习惯让PHP直接渲染一页HTML并echo出来，但这会让前端难以统一处理加载状态、错误提示和数据绑定。推荐返回纯数据，由前端控制渲染逻辑。
示例接口 api/list.php：
立即学习“PHP免费学习笔记（深入）”；
<?php
header('Content-Type: application/json; charset=utf-8');
$page = max(1, (int)($_GET['page'] ?? 1));
$limit = min(100, max(1, (int)($_GET['limit'] ?? 20)));
$offset = ($page - 1) * $limit;
<p>// 假设 $pdo 已初始化
$stmt = $pdo->prepare("SELECT id, title, created_at FROM posts ORDER BY id DESC LIMIT :limit OFFSET :offset");
$stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);</p><p>// 返回带分页元信息的结构体，方便前端判断是否还有下一页
$total = (int)$pdo->query("SELECT COUNT(<em>) FROM posts")->fetchColumn();
$has_next = ($page </em> $limit) < $total;</p><p>echo json_encode([
'data' => $data,
'meta' => [
'page' => $page,
'limit' => $limit,
'total' => $total,
'has_next' => $has_next
]
], JSON_UNESCAPED_UNICODE);
前端用Intersection Observer监听触底比onscroll更可靠
用window.onscroll手动计算scrollTop + clientHeight >= scrollHeight容易误触发、性能差、兼容性弱。现代方案是用IntersectionObserver监听一个占位元素（如页脚或空<div id="loader"></div>）是否进入视口。
- 无需节流函数，浏览器原生优化，iOS Safari也支持（v12.2+）
- 避免重复请求：观察到进入视口后，先置
loading = true，成功加载后再重置 - 若
response.meta.has_next === false，应调用observer.unobserve(target)停掉监听 - 错误时建议
setTimeout(() => loading = false, 2000)防锁死，而不是直接throw
容易被忽略的关键点：防重复提交和加载态反馈
用户快速滚动时，可能连续触发多次“触底”，但PHP接口本身无状态，如果前端不加控制，就会发一堆重复请求，后端可能查出相同数据，前端也可能把同一批内容append两次。
必须在JavaScript层做两件事：
- 维护一个
let loading = false开关，每次请求前检查，请求开始设为true，无论成功失败都设回false - 给加载中的
<div id="loader">添加CSS过渡，比如<code>opacity: 0.6; pointer-events: none;，避免用户误点多次 - PHP接口若返回
503 Service Unavailable或429 Too Many Requests，前端应暂停几秒再试，而不是立刻重试
后端不做幂等控制的话，这个问题只能靠前端守住第一道门。
