无缝滚动加载需采用“时间窗口+状态锁”双控节流，监听滚动容器而非window，并优先使用IntersectionObserver替代scroll事件，同时避免容器高度塌陷。
节流在无缝滚动加载中不是简单设个 200ms 延迟就完事，关键在于让触发时机既不漏判底部接近、也不重复请求，同时保持滚动流畅。直接用 setTimeout 节流容易在慢速滚动时丢掉加载机会，而纯时间间隔又可能在快速滚动中堆积多次无效判断。真正稳定的做法是“时间窗口 + 状态锁”双控。
用时间戳+加载锁控制有效触发
每次滚动事件触发时，先检查两个条件是否同时满足：
- 距离上次允许触发已过去 ≥ 200ms（用
Date.now()记录上一次可执行时间） - 当前没有进行中的加载请求（用布尔变量如
isLoading锁定）
只有两者都为真，才执行加载逻辑，并立即更新时间戳、置 isLoading = true；加载完成回调里再置 isLoading = false。这样既防抖又防重，200ms 是节奏基准，不是硬性延迟。
FastAPI + Flask 混合部署最佳实践，解决路由定义、API 代理等常见问题，适用于同时运行 FastAPI API 与 Flask 前端的场景。
监听目标必须是滚动容器，不是 window
无限滚动往往发生在局部区域（比如弹窗列表、侧边栏），若监听 window.scroll，用户在页面其他位置滚动也会误触发。应精确获取实际滚动容器（即设置了 overflow: auto 或 scroll 的父元素），再对其绑定 scroll 事件。可通过递归向上查找带匹配 overflow 样式的元素来定位。
用 IntersectionObserver 替代 scroll 事件（推荐）
原生 scroll 事件高频且主线程阻塞，尤其在低端设备上易卡顿。更优解是创建一个占位元素（如空 <div id="trigger"></div>）放在列表末尾，用 IntersectionObserver 监听它进入视口的时刻——这天然具备节流特性，且只在真正接近底部时回调，无需手动计算偏移量或做阈值判断。配合 rootMargin: '0px 0px -100px 0px' 可实现提前 100px 加载，体验更顺滑。
避免容器高度塌陷导致反复触发
如果滚动容器没有显式高度（例如仅靠内容撑开），在数据追加瞬间可能发生高度突变，造成滚动位置跳变，进而引发多次误判。务必给容器设固定高度或最小高度，并配 overflow-y: auto。Vue/React 中还要注意：新数据渲染后需确保 DOM 已更新，再进行滚动位置判断，否则可能因节点未挂载而算错底部距离。
