用 Intersection Observer 监听底部占位元素更稳定，因其不受页面动态高度变化、scrollY 更新异常及 box-sizing 差异影响；需保持占位元素存在、预设 rootMargin、插入后补偿滚动并确保列表项高度可预测。
用 Intersection Observer 监听底部占位元素，比直接算 window.scrollY + window.innerHeight >= document.body.scrollHeight 稳定得多——后者在图片懒加载、广告插入或 CSS box-sizing 不一致时极易误触发。
为什么不用 scroll 事件监听滚动到底部
滚动事件高频触发、无节流时容易重复请求；移动端 window.scrollY 在部分 WebView 下不更新，得 fallback 到 document.documentElement.scrollTop；更关键的是，页面高度动态变化（比如图片加载后撑开内容）会让“到底部”判断瞬间失效。
- 错误现象：
fetch发了三次，只有一条成功返回，其余两条数据错乱或覆盖 - 真实可靠的判断方式：放一个
在列表末尾，用IntersectionObserver观察它是否进入视口 - 初始化时传
{ rootMargin: '0px 0px 200px 0px' }，提前 200px 触发，避免用户拉到最底才动 - 回调里调用加载逻辑后，立刻
observer.unobserve(triggerEl)，等新内容插入后再observe()一次
fetch 加载时如何防重叠和乱序
网络响应时间不确定，后发的请求可能先返回。光靠 AbortController 不够——服务端未必真正中断，且有些接口根本不支持取消。
- 给每次请求配一个递增的
requestId，全局存let latestRequestId = 0 -
fetch成功后，先比对响应携带的requestId是否等于latestRequestId，不等就丢弃 - UI 层用
isLoading布尔值控制按钮/加载条，并禁止再次发起请求（比单纯禁用按钮更防手抖） - 别前端自增
page=2、page=3，优先用服务端返回的next_cursor或next_url拼接下一次请求地址
插入新内容后怎么不让滚动位置跳
直接 container.append(...newItems) 或 innerHTML += html 会导致浏览器重排，尤其列表项高度不固定时，用户看到的视口内容会突然上蹿或下掉。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 简单稳妥的做法：给整个列表容器加
position: relative，加载前用transform: translateY(-Xpx)上移，插入后再还原 - 或者加载前记录最后一项的
offsetTop，插入后算出新增总高度，再window.scrollBy(0, delta)补偿 - 务必确保每条列表项有明确高度（哪怕用
min-height: 64px），否则浏览器无法预估布局变化量 - 如果后端返回的是 HTML 字符串，别用
innerHTML，改用DOMParser解析后取doc.body.children再 append，避免执行内联脚本和丢失事件绑定
空响应和边界结束信号怎么处理
很多实现只检查 data.length > 0，但实际中“已到底”可能是返回 { code: 0, data: [], has_more: false }，也可能是 200 空数组却不带任何标识字段。
- 必须和服务端约定一个明确的结束信号，比如统一用
is_last_page: true或next_cursor: null - 每次
fetch前检查if (!hasMore || isLoading) return，并在响应解析后显式更新hasMore -
.catch()或非 200 响应里，也要设hasMore = false并提示用户，不能静默失败 - 千万别在
finally里重置hasMore——那是清理状态的地方，不是重置业务逻辑的地方
最易被忽略的点是：占位元素 #loader-trigger 必须始终保留在 DOM 中，不能每次加载完就 remove()，否则 IntersectionObserver 失效；还有，所有列表项的 CSS 高度必须可预测，否则位移补偿和 transform 方案都会失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
