判断容器滚动到底部应监听其自身scroll事件，用scrollTop+clientHeight>=scrollHeight-threshold（threshold取1～5px），而非window.scrollY或document.body.scrollHeight，因局部滚动容器是独立滚动上下文。
怎么判断某个容器滚动到底部不能直接用 window.scrollY，必须监听目标元素自身的 scroll 事件，并用它的 scrollTop、scrollHeight 和 clientHeight 计算。关键不是“页面”，而是“这个容器自己是否滚到底”。
-
scrollTop 是容器内滚动条向上偏移的距离（即已滚过的高度）
-
scrollHeight 是容器内部全部内容的总高度（含不可见部分）
-
clientHeight 是容器可视区域高度（不含滚动条占位，但多数场景够用）
- 判断条件是：
element.scrollTop + element.clientHeight >= element.scrollHeight - threshold，其中 threshold 建议设为 1～5px，避免小数像素或重排延迟导致等式不成立
为什么 document.body.scrollHeight 在局部滚动里完全没用
因为局部滚动容器（比如 <div class="list" style="overflow-y: auto; height: 400px;">）是一个独立的滚动上下文，它的滚动状态和 document.body 无关。用 document.body.scrollHeight 会始终返回整个页面高度，跟这个 div 是否到底毫无关系。
- 错误写法：
container.scrollTop + window.innerHeight >= document.body.scrollHeight
- 正确写法：
container.scrollTop + container.clientHeight >= container.scrollHeight - 2
- 特别注意：iOS Safari 和某些 Android WebView 中，
clientHeight 可能包含滚动条宽度，若需精确可改用 getBoundingClientRect().height
IntersectionObserver 能用于局部滚动容器吗
可以，但必须显式指定 root 为该容器，否则默认观察 window，完全无效。
Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
- 创建观察器时传入
{ root: container, rootMargin: '0px 0px -50px 0px' }，rootMargin 的负 bottom 值表示提前 50px 触发（模拟容差）
- 被观测的目标必须是容器内的一个真实 DOM 元素（如
<div id="loader-trigger"></div>），且放在容器末尾、不被 display: none 或 visibility: hidden 隐藏
- 兼容性 fallback：若
IntersectionObserver 不可用（如 IE11），再退回到监听 container.addEventListener('scroll', ...)
- 每次触发后记得
observer.unobserve(triggerEl)，等新内容插入后再 observer.observe(triggerEl)，防止重复回调
容易被忽略的移动端陷阱
iOS Safari 和部分安卓 WebView 对局部滚动容器的 scrollTop 更新有延迟，尤其在快速拖拽松手后的惯性滚动阶段——此时 scroll 事件可能已停止，但滚动还没真正停稳。
立即学习“前端免费学习笔记（深入）”；
- 不要只依赖一次
scroll 事件判断，加个 setTimeout 或 requestIdleCallback 延迟 50ms 再校验，或监听 scrollend（仅 Chrome 120+ / Safari 17.4+ 支持）
- 如果容器用了
transform: translateZ(0) 或 will-change: scroll-position，某些旧版 WebKit 下 scrollTop 会卡在整数，建议统一用 Math.round(element.scrollTop) 比较
- 避免在
scroll 回调里直接发起 fetch，务必加 loading 锁和 hasMore 状态控制，否则快速滑动可能并发触发多次请求
容差值、root 显式指定、滚动结束时机判断——这三个点在局部滚动场景下比全局滚动更易出错，也更难调试。
不能直接用 window.scrollY，必须监听目标元素自身的 scroll 事件，并用它的 scrollTop、scrollHeight 和 clientHeight 计算。关键不是“页面”，而是“这个容器自己是否滚到底”。
-
scrollTop是容器内滚动条向上偏移的距离（即已滚过的高度） -
scrollHeight是容器内部全部内容的总高度（含不可见部分） -
clientHeight是容器可视区域高度（不含滚动条占位，但多数场景够用） - 判断条件是：
element.scrollTop + element.clientHeight >= element.scrollHeight - threshold，其中threshold建议设为1～5px，避免小数像素或重排延迟导致等式不成立
为什么 document.body.scrollHeight 在局部滚动里完全没用
因为局部滚动容器（比如 <div class="list" style="overflow-y: auto; height: 400px;">）是一个独立的滚动上下文，它的滚动状态和 document.body 无关。用 document.body.scrollHeight 会始终返回整个页面高度，跟这个 div 是否到底毫无关系。
- 错误写法：
container.scrollTop + window.innerHeight >= document.body.scrollHeight - 正确写法：
container.scrollTop + container.clientHeight >= container.scrollHeight - 2 - 特别注意：iOS Safari 和某些 Android WebView 中，
clientHeight可能包含滚动条宽度，若需精确可改用getBoundingClientRect().height
IntersectionObserver 能用于局部滚动容器吗
可以，但必须显式指定 root 为该容器，否则默认观察 window，完全无效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 创建观察器时传入
{ root: container, rootMargin: '0px 0px -50px 0px' }，rootMargin的负 bottom 值表示提前 50px 触发（模拟容差） - 被观测的目标必须是容器内的一个真实 DOM 元素（如
<div id="loader-trigger"></div>），且放在容器末尾、不被display: none或visibility: hidden隐藏 - 兼容性 fallback：若
IntersectionObserver不可用（如 IE11），再退回到监听container.addEventListener('scroll', ...) - 每次触发后记得
observer.unobserve(triggerEl)，等新内容插入后再observer.observe(triggerEl)，防止重复回调
容易被忽略的移动端陷阱
iOS Safari 和部分安卓 WebView 对局部滚动容器的 scrollTop 更新有延迟，尤其在快速拖拽松手后的惯性滚动阶段——此时 scroll 事件可能已停止，但滚动还没真正停稳。
立即学习“前端免费学习笔记（深入）”；
- 不要只依赖一次
scroll事件判断，加个setTimeout或requestIdleCallback延迟 50ms 再校验，或监听scrollend（仅 Chrome 120+ / Safari 17.4+ 支持） - 如果容器用了
transform: translateZ(0)或will-change: scroll-position，某些旧版 WebKit 下scrollTop会卡在整数，建议统一用Math.round(element.scrollTop)比较 - 避免在
scroll回调里直接发起fetch，务必加loading锁和hasMore状态控制，否则快速滑动可能并发触发多次请求
容差值、root 显式指定、滚动结束时机判断——这三个点在局部滚动场景下比全局滚动更易出错，也更难调试。
