直接用 height: 100vh 做无限滚动占位会因 ios safari 等浏览器视口高度动态变化导致高度跳变、滚动错乱，且 intersectionobserver 在占位高度为 0 时无法触发；应改用固定高度、padding-bottom 占位、calc 预估高度，并配合适当负 rootmargin 提前加载，配合 insertadjacentelement 安全更新 dom 并保持 scrolltop。
为什么直接用 height: 100vh 做无限滚动占位会出问题
因为浏览器视口高度（100vh）在 iOS Safari 或部分 Android 浏览器里会随地址栏显隐动态变化，导致列表容器高度跳变、滚动错乱甚至卡死。更麻烦的是，真实数据加载前若占位区域高度为 0，IntersectionObserver 根本无法触发回调。
正确做法是让占位容器拥有稳定、可预测的高度，且不依赖视口尺寸：
- 用固定像素高度（如
min-height: 600px）兜底，避免首次渲染空白 - 配合
padding-bottom或伪元素预留“底部缓冲区”，防止最后一项紧贴视口底边时 observer 失效 - 如果列表项高度已知（比如每项
80px），优先用height: calc(80px * 50)预估前 50 条的总高，比纯vh更可靠
IntersectionObserver 的 rootMargin 要设成负值才真正有用
很多人写 new IntersectionObserver(callback, { rootMargin: '0px' })，结果发现最后一项总要滚到底部才触发加载——这是因为默认触发时机是目标元素**完全进入**视口，而用户希望“快到但还没到”时就预加载。
实际应设为负 margin 提前捕获：
-
rootMargin: '0px 0px -200px 0px'：让 observer 在目标距离视口底部还有 200px 时就触发（上/右/下/左顺序） - 若列表项平均高度为
72px，推荐设-144px（约两行），兼顾提前量和防抖 - 注意：iOS Safari 对负
rootMargin支持良好，但旧版 Chrome 可能截断，建议加降级逻辑——监听scroll事件兜底
用 height: 0 + padding-bottom 实现无内容占位更轻量
比起渲染一堆空 <div> 占位，CSS 层面控制高度更高效，也避免 DOM 膨胀影响滚动性能。<p>示例结构：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><div class="infinite-list">
<div class="list-items"></div>
<div class="list-placeholder" style="height: 0; padding-bottom: 1200px;"></div>
</div></pre>
<p>说明：</p>
<ul>
<li>
<code>padding-bottom 产生的高度参与文档流布局，能撑开父容器，IntersectionObserver 可正常检测其位置
height: 0 而只靠 padding-bottom 也可，但显式设 height: 0 能防止某些 CSS 框架或重置样式干扰.list-placeholder 或设 display: none，不要用 visibility: hidden（仍占空间）服务端返回数据后，DOM 更新必须用 insertAdjacentElement 而非 innerHTML
用 innerHTML += ... 或反复 appendChild 会导致滚动位置丢失、焦点错乱，尤其在长列表中极其明显。
安全更新方式：
- 批量生成新节点后，用
listContainer.insertAdjacentElement('beforeend', fragment)一次性插入 - 若需保留原 DOM（比如已有编辑态 input），改用
listContainer.append(...frag.children)（现代浏览器支持） - 关键点：插入前记录当前
scrollTop，插入后手动恢复，否则 iOS Safari 会自动跳到顶部 - 别忘了在插入后调用
observer.observe(lastItem)，否则后续项不会被监听
滚动位置保持这事容易被忽略，但用户一拉就跳回顶部，体验直接崩掉。
