可靠的上滑加载需满足四点：用document.body.scrollHeight减100px余量判断触底；用isLoading开关+finally重置防重复请求；依据response.has_more而非空数组决定是否停止；用原生DOM方法或DocumentFragment安全插入节点。
上滑加载（即滚动到底部自动加载更多）不是加个 scroll 事件监听就能稳用的，核心卡点在「触底判断不准」「重复请求」「DOM 插入破坏状态」这三处。iOS Safari、安卓 WebView、缩放页面、动态插入内容都会让 window.scrollY + window.innerHeight === document.body.scrollHeight 失效。
怎么写可靠的触底判断条件
别直接比等号，也别只用 document.documentElement.scrollHeight——它在 iOS 和部分安卓 WebView 中不更新或返回 0。统一用 document.body.scrollHeight，并预留余量（threshold = 100）：
const isAtBottom = window.scrollY + window.innerHeight >= document.body.scrollHeight - 100;
- 余量设成 100px 是经验值：太小（如 1px）在滚动惯性、缩放、字体渲染延迟下极易漏判；太大（如 300px）会提前触发，用户还没看到底部就加载
- 移动端必须监听
window.onscroll，不能只监听某个容器——除非你明确把滚动上下文设为该容器（overflow: auto+ 固定高度），否则 iOS 会默认用body滚动 - 如果页面有
position: fixed页脚，要把它从scrollHeight计算中排除，否则触底永远不成立；可改用document.querySelector('main').scrollHeight替代
如何防重复请求和 loading 状态错乱
用户快速滚动时，scroll 事件每秒触发几十次，不加控制就会并发多个 fetch。开关变量 isLoading 必须配合 finally 块重置，不能只靠 then 或 catch：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
let isLoading = false;
function loadMore() {
if (isLoading) return;
isLoading = true;
fetch('/api/items?offset=' + offset)
.then(r => r.json())
.then(data => {
appendItems(data);
offset += data.length;
})
.catch(err => console.error(err))
.finally(() => isLoading = false);
}
- 不要在
scroll回调里直接调用loadMore()，必须包裹节流逻辑，例如用requestAnimationFrame或setTimeout延迟执行 - 后端返回空数组不等于“到底”，得看分页字段：
response.has_more === false才该停掉监听；否则网络抖动导致某次返回空，会误判为结束 - 禁用按钮或显示 loading 提示时，记得同步更新 DOM 属性，比如
button.disabled = true和button.setAttribute('aria-busy', 'true')，兼顾可访问性
fetch 后怎么安全追加 DOM 而不崩状态
直接 innerHTML += htmlString 是高危操作：已绑定的事件监听器丢失、React/Vue 组件被销毁、表单输入值清空、甚至引发内存泄漏。必须走原生 DOM 方法：
立即学习“前端免费学习笔记（深入）”；
data.forEach(item => {
const li = document.createElement('li');
li.dataset.id = item.id;
li.textContent = item.title;
listEl.append(li);
});
- 如果后端返回的是完整 HTML 字符串（不推荐，但 SSR 场景存在），用
DOMParser解析再取子节点：parser.parseFromString(html, 'text/html').body.children，避免 XSS 和结构污染 - 批量插入大量节点时，先创建
DocumentFragment，再一次性append()到目标容器，减少重排次数 - 插入后不要手动改
scrollTop，尤其用户正在滚动中——强行设置会打断手势，造成“跳帧”感；如需锚点恢复，用scrollIntoView({ block: 'nearest' })更自然
真正难的不是写出能跑的代码，而是当用户在弱网下反复上滑、后端偶发超时、列表项含 input 或 video 时，loading 开关仍准确、DOM 不重置、触底判断不漂移——这些边界情况，得靠节流 + 开关 + 分页字段信任 + 安全插入四者咬合才撑得住。
