前端虚拟滚动用游标替代分页，通过传递上一页末项唯一标识（如时间戳+ID）实现无缝加载，避免数据重复或遗漏，适用于无限滚动等场景。
前端虚拟滚动用游标（cursor）替代传统分页（page + limit），能避免跳页时的数据重复或遗漏，特别适合无限滚动、消息列表、日志流等场景。核心思路是：每次请求只传上一页最后一条数据的唯一标识（如时间戳、ID），后端据此返回下一批数据。
游标设计与后端配合要点
游标本质是排序字段的值，不是随机字符串。常见选择有：
-
时间戳 + 唯一ID组合：如
"2024-05-20T10:30:45.123Z_abc123"，解决同一毫秒多条数据的问题 - 数据库自增ID（仅限无删除/归档场景）：简单但不推荐用于用户生成内容，因ID可能不连续或被回收
- 有序序列号（如 Snowflake ID）：天然支持时间+机器维度排序，适合作为游标主键
后端查询需使用 WHERE sort_field （降序最新在前）或 <code>> ?（升序），且 sort_field 必须有索引。不能用 OFFSET，否则失去游标意义。
前端游标管理与滚动监听逻辑
前端需维护当前游标、加载状态、数据缓存三者协同：
立即学习“前端免费学习笔记（深入）”；
- 初始加载不带游标，取最新 N 条；响应头或响应体中返回首条/末条的游标值（如
next_cursor） - 滚动到底部时，检查
isLoading === false && hasMore === true，再发起下一页请求，携带cursor=lastItem.cursor - 渲染区域用
position: absolute定位，根据每项高度和起始索引计算transform: translateY()，只挂载可视区内元素 - 游标应随数据一起存入组件状态（如 React 的
useState或 Vue 的ref），不可仅靠 DOM 推导
处理边界与异常情况
真实场景中需主动兜底，避免白屏或死锁：
- 后端返回空数组时，置
hasMore = false，停止后续加载 - 网络失败或超时后，保留原游标，提供重试按钮而非自动重发，防止重复请求
- 用户快速滚动导致多次触发加载，用
AbortController取消前序未完成请求 - 下拉刷新时重置游标为
null，重新拉取最新数据，并清空已有列表（非拼接）
轻量实现示例（纯 JS + HTML）
无需框架，用 IntersectionObserver 替代 scroll 事件更高效：
let cursor = null;
let isLoading = false;
let hasMore = true;
const list = document.getElementById('virtual-list');
const observer = new IntersectionObserver(handleIntersect, { threshold: 0.1 });
<p>function loadNext() {
if (isLoading || !hasMore) return;
isLoading = true;
fetch(<code>/api/items?limit=20${cursor ?</code>&cursor=${encodeURIComponent(cursor)}<code>: ''}</code>)
.then(r => r.json())
.then(data => {
renderItems(data.items);
cursor = data.next_cursor || null;
hasMore = !!cursor;
})
.finally(() => isLoading = false);
}</p><p>function renderItems(items) {
items.forEach((item, i) => {
const el = document.createElement('div');
el.style.position = 'absolute';
el.style.top = <code>${i * 60}px</code>; // 假设每项高60px
el.textContent = item.content;
list.appendChild(el);
});
}</p><p>// 观察底部占位符
observer.observe(document.getElementById('loader-trigger'));
function handleIntersect(entries) {
if (entries[0].isIntersecting) loadNext();
}注意：实际项目中需结合真实项高动态计算、支持反向加载（上拉）、以及键盘导航兼容性。
