移动端h5上拉加载关键在准确定义触底：需统一视口基准（正确设置viewport、用document.documentelement.clientheight、稳定rem计算），触底判定要加容差、绑定目标容器、加节流与状态锁，并针对模态框、吸顶栏、动态插入等场景特殊处理。
移动端 H5 实现上拉加载更多，关键不在“滑多远”，而在于“怎么准确定义触底”。视口适配没做对，滚动高度计算就会失真，导致加载时机不准、重复触发或压根不触发。
视口适配必须先统一基准
很多触底失效，根源是 clientHeight / scrollHeight 拿到的值和真实可视区域不一致。原因常出在 viewport 设置或 rem 动态计算偏差上：
-
viewport 必须设全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">缺一不可，否则 iOS/Android 可能启用默认 980px 布局视口，让 clientHeight 偏大 -
避免用 window.innerHeight 做判定依据：它反映的是视觉视口，但键盘弹出、地址栏收起时会剧烈变化；应优先用
document.documentElement.clientHeight（布局视口高度） - rem 适配中 font-size 动态计算要稳定：若根字体随 resize 频繁抖动，会影响容器高度渲染，间接干扰 scrollTop 计算；建议只在页面初始化和 orientationchange 时重算，而非 onresize
触底判定逻辑要防误判
不能简单写成 scrollTop + clientHeight >= scrollHeight，移动端存在滚动延迟、弹性回弹、iframe 嵌套等干扰因素：
-
加 1–3px 容差值：用
scrollTop + clientHeight >= scrollHeight - 2，避免因小数精度或渲染延迟导致临界点漏判 -
绑定到目标容器，而非 window：如果列表在固定高度的
<div class="list-wrap"> 内滚动，就监听该 div 的 scroll 事件，并用它的 <code>scrollTop、clientHeight、scrollHeight—— 这样不受 body 滚动或外部样式影响 -
节流 + 状态锁：触发后立即设
loading = true，请求完成再置为 false；同时用setTimeout或requestIdleCallback包裹判断逻辑，防止快速滚动时高频触发 -
模态框内滚动列表：父容器是
position: fixed且设置了overflow-y: auto，此时必须用该容器的 DOM 属性，且注意其scrollHeight是否包含未渲染的虚拟项（如使用了虚拟滚动） -
底部有吸顶栏或 tabBar：用户“看到底”不等于 DOM 滚到底，可预留 44px～80px 视觉缓冲区，把判定条件改为
scrollTop + clientHeight >= scrollHeight - 60 -
动态插入内容后高度突变：比如加载新数据后追加 10 条，但 DOM 渲染未完成就立刻判定，会导致
scrollHeight还是旧值；应在$nextTick（Vue）或requestAnimationFrame后再检查
特殊场景要单独处理
某些 UI 结构会让常规判定失效，需针对性调整：
视口适配是地基，触底判定是开关。地基不稳，开关再灵敏也容易错位。两者配合得当，上拉加载才能既灵敏又可靠。
