局部滚动自动加载需监听容器scroll事件并用scrolltop+clientheight>=scrollheight判断触底，优先用getboundingclientrect().bottom校验，配合loading锁、游标分页及dom安全插入。
局部滚动自动加载不是监听 window，而是监听某个可滚动容器（比如 div）的 scroll 事件，并用它的内部高度、可视高度和滚动偏移量做判断——否则在单页应用或弹窗/侧边栏场景下会完全失效。
如何正确监听局部容器的滚动触底
常见错误是直接复用全局滚动逻辑，把 document.documentElement.scrollTop 换成 container.scrollTop 就完事。但局部容器触底的关键指标是：container.scrollTop + container.clientHeight >= container.scrollHeight，且必须用 getBoundingClientRect() 或 scrollHeight 做校验，不能依赖 offsetHeight（它可能包含边框、补白，不反映真实可滚动范围）。
- 确保目标容器设置了
overflow-y: auto或scroll，且高度固定（如height: 500px或max-height），否则clientHeight可能为 0 - 不要用
$(container).height()（jQuery）或container.offsetHeight替代clientHeight，前者含 padding/border，后者含滚动条占位，都会导致阈值漂移 - 移动端 WebView 中，某些安卓版本对
scrollTop更新有延迟，建议加一层节流（requestIdleCallback或setTimeout(..., 0)包裹判断逻辑）
为什么用 getBoundingClientRect 更可靠
当容器内有动态插入内容、字体加载、图片懒加载等行为时，scrollHeight 可能滞后于真实布局高度，造成“已到底却没触发”或“反复触发”。container.getBoundingClientRect().bottom 是基于当前渲染帧计算的视口相对坐标，能更及时反映滚动位置与容器底边的距离。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 计算方式：取容器底部相对于视口顶部的距离，再减去窗口高度 →
const distanceToBottom = container.getBoundingClientRect().bottom - window.innerHeight - 推荐阈值设为 ≤ 1px，而非传统 100px；配合 loading 锁，可避免快速滚动时多次误判
- 注意：该方法依赖容器在视口内可见，若容器被
display: none或visibility: hidden隐藏，getBoundingClientRect()返回全 0，需提前检查container.offsetParent !== null
防重复请求与 loading 锁怎么写
局部滚动容器常嵌套在 Tab、Modal 或 Accordion 中，用户切换后可能重新触发滚动监听，若没状态隔离，容易出现多个并发请求或无限插入相同数据。
- 每个容器应维护独立状态：例如
const state = new WeakMap(); state.set(container, { loading: false, hasMore: true }) - fetch 前必须检查：
if (state.get(container)?.loading || !state.get(container)?.hasMore) return - 服务端返回空数组或
next_cursor: null时，显式设hasMore = false，并移除 scroll 监听器（或用once: true选项避免手动清理） - 避免用
page参数分页，改用游标（cursor）或时间戳（last_id），防止插入新数据导致页码错乱
DOM 插入时如何避免重排和事件丢失
局部容器内往往已有绑定事件的按钮、输入框或开关，用 innerHTML += 或 insertAdjacentHTML 会销毁原有节点，导致事件监听器失效、表单值清空、焦点丢失。
- 优先用
document.createElement+container.append()逐条插入，保持原节点树结构不变 - 若后端返回的是 HTML 字符串（如 SSR 片段），必须用
DOMParser解析：const doc = new DOMParser().parseFromString(html, 'text/html'); container.append(...doc.body.children) - 插入后检查是否需要恢复焦点（如容器内有搜索框），调用
input.focus()前先确认input.offsetParent !== null - 避免在插入过程中频繁读取
scrollHeight，它会强制同步布局计算，可用requestAnimationFrame批量处理
真正难的不是“怎么触发”，而是“什么时候不该触发”——容器是否可见、是否正在动画、是否被其他逻辑临时禁用，这些状态都得显式管理，不能靠滚动事件本身推断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
