监听滚动到底部加载更多需判断scrolltop + innerheight >= scrollheight - tolerance，配合防抖、loading锁及动态更新scrollheight边界，避免漏载或重复请求。
监听滚动到底部并加载更多，核心是判断页面滚动高度 + 可视区域高度 ≥ 文档总高度。关键不是“滚动条触底”，而是“内容即将不可见时触发请求”，避免漏加载或重复加载。
监听 scroll 事件并计算是否到底
在 window 上监听 scroll，用以下三个值做判断：
-
document.documentElement.scrollTop || document.body.scrollTop：当前垂直滚动距离（兼容 IE） -
window.innerHeight：浏览器可视区域高度 -
document.documentElement.scrollHeight：整个文档高度（含不可见部分）
满足 scrollTop + innerHeight >= scrollHeight - tolerance 即视为接近底部。tolerance（如 100px）用于提前触发，提升用户体验，避免用户必须拉到最底才加载。
防抖 + 加载状态锁，避免重复请求
滚动事件高频触发，不加控制会导致多次发起同一请求。推荐用简单节流（如 150ms 内只响应一次）+ 请求中状态锁：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 定义一个
let loading = false标志位 - 每次进入判断逻辑前，先检查
if (loading) return - 请求开始前设为
true，成功/失败后重置为false
不依赖外部库也能实现轻量节流：用 setTimeout + clearTimeout 缓存上一次定时器 ID，保证最小间隔。
加载完成后更新判断边界，防止误触
新内容插入 DOM 后，scrollHeight 会变大，但用户可能还没滚动，此时若不重置状态，容易立刻再次触发。稳妥做法是：
- 加载成功后，确保新内容已渲染（可用
requestAnimationFrame或直接操作后读取 DOM） - 不必重置滚动位置，但要允许下一次合理触发 —— 关键是靠
loading锁和节流来控制节奏 - 如果使用
append()或innerHTML +=追加，注意避免重绘丢失滚动位置；推荐用element.insertAdjacentHTML('beforeend', ...)
完整可运行示例（无框架）
以下是最简可用逻辑，复制即用：
let loading = false;
let lockScroll = false;
<p>function handleScroll() {
const { scrollTop, scrollHeight } = document.documentElement;
const innerHeight = window.innerHeight;
const tolerance = 100;</p><p>if (loading || lockScroll) return;
if (scrollTop + innerHeight >= scrollHeight - tolerance) {
loading = true;
loadMore().finally(() => {
loading = false;
});
}
}</p><p>function loadMore() {
// 替换为你的实际请求，例如 fetch('/api/items?offset=...')
return new Promise(resolve => {
setTimeout(() => {
const container = document.getElementById('list');
const newItem = document.createElement('div');
newItem.textContent = <code>Item ${container.children.length + 1}</code>;
container.appendChild(newItem);
resolve();
}, 800);
});
}</p><p>window.addEventListener('scroll', handleScroll);
// 首屏可能初始就满足条件，手动触发一次
handleScroll();</p>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
