IntersectionObserver 回调不等于元素刚进入视口，真正可靠的是哨兵元素 intersectionRatio 首次 > 0 且 isIntersecting 为 true；需用 isLoading 控制请求闸门、为局部滚动容器加 contain: layout style paint、用 requestAnimationFrame 补偿滚动位置。
IntersectionObserver 回调触发时机不等于“进入视口”
很多人以为 isIntersecting: true 就代表元素刚进入可视区，实际它可能在元素**已完全可见、甚至即将离开**时才触发——尤其当 threshold 设为 [0]（默认）且目标元素较大时。真正适合加载下一页的信号，是某个“占位哨兵元素”（sentinel）的 intersectionRatio 首次 > 0，且 isIntersecting 为 true。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单独创建一个
<div id="sentinel"></div>放在列表末尾，高度设为1px，不占布局（position: absolute或height: 1px; margin-top: -1px） - 用
new IntersectionObserver(callback, { threshold: [0] })观察它，避免设更高阈值（如[0.1]），否则会漏触发 - 回调中必须立刻调用
observer.unobserve(sentinel)，防止重复加载；加载成功后再重新observe(sentinel)
滚动加载中重复请求和状态错乱怎么防
用户快速滚动或网络延迟时，sentinel 可能被多次触发，而异步请求未完成就又发起新请求，导致数据覆盖、顺序错乱或 loading 状态卡死。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用一个布尔变量
isLoading控制请求闸门：回调开头检查if (isLoading) return，请求开始前设为true，结束（无论成功失败）后设为false - 不要依赖 DOM 状态（如 class 名）判断是否加载中——它可能滞后或被其他逻辑干扰
- 如果使用 Promise 链，确保每次加载都返回新 Promise，避免
.then()被多次注册；推荐用async/await+try/catch显式控制流
移动端 Safari 下 IntersectionObserver 不触发？
Safari（尤其 iOS 15–16）对 IntersectionObserver 的兼容有隐藏限制：若容器不是视口本身（比如列表在外层 overflow-y: auto 的 div 中），且该容器没有显式设置 will-change: transform 或 contain: layout，观察器可能完全不回调。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先让列表直接滚动整个页面（
body滚动），这是最稳定方案 - 若必须局部滚动，请给滚动容器加
style="contain: layout style paint;"（比will-change更轻量且兼容性更好） - 在初始化
IntersectionObserver前，加一行console.log('IO supported:', 'IntersectionObserver' in window)，iOS 旧版 Safari 会直接undefined
加载更多后如何保持滚动位置不跳动
往列表底部追加新内容，浏览器会自动撑开高度，导致当前滚动条位置相对文档顶部比例变化——用户感觉“页面上蹿”，尤其在加载多页后更明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在插入新数据前，记录
sentinel.offsetTop（注意不是getBoundingClientRect().top，后者是视口内坐标） - 插入后，计算新增内容总高度，再执行
window.scrollBy(0, 新增高度)补偿 - 更稳妥的做法：用
scrollIntoView({ block: 'nearest', inline: 'start' })让sentinel自动对齐，它会内部做平滑补偿，且兼容性好
这个补偿动作必须在 DOM 更新后、下一次重绘前执行，推荐用 requestAnimationFrame 包裹。
