html表格实现无限滚动加载的核心是将表格嵌入带overflow-y: auto的外层容器，并用intersection observer监听容器内占位元素；直接对设overflow无效，因表格为独立格式化上下文，且需绑定事件到容器而非window，配合加载状态控制、安全dom插入及移动端降级方案。
HTML表格实现无限滚动加载，核心不是“给加滚动”，而是把表格包进一个可滚动容器，再用AJAX动态追加里的——否则浏览器会直接撑满页面，根本不会触发滚动监听。
为什么直接对
监听scroll没用
因为
html-ppt-to-pdf
将使用 `` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
默认是内容自适应高度，没有固定高度就不会产生滚动条，window.onscroll或IntersectionObserver都监听不到“到底部”。必须用一个带overflow-y: auto的外层<div>包裹<code><table>，让滚动行为发生在该容器内。
<ul><li>错误写法：<code><table style="height: 400px; overflow-y: auto"> —— 大部分浏览器不支持对<code><table>设<code>overflow
正确结构：外层<div id="table-wrapper" style="max-height: 400px; overflow-y: auto"><table><tbody></tbody></table></div>
滚动事件要绑定在document.getElementById('table-wrapper')上，不是window（除非你真想监听整个页面滚动）
用IntersectionObserver监听表格容器底部
比scroll事件更可靠，不卡顿，且天然防抖。关键是要在<tbody>末尾插入一个<code><tr id="sentinel"><td colspan="3"></td></tr>作为观察目标。
- 创建Observer时，
rootMargin: "0px 0px -50px 0px"表示提前50px触发，避免用户“刚好卡在临界点”却没加载
- 回调中检查
entries[0].isIntersecting === true才发起请求，防止重复触发
- 每次加载成功后，要把
#sentinel从DOM移除再重新append到<tbody>末尾，否则Observer会停止工作
<li>别忘了加加载状态控制：<code>isLoading = true，请求结束再置false，否则快速滚动可能发多次请求
AJAX更新表格tbody的坑：innerHTML vs DOM操作
后端返回JSON还是HTML，决定了你更新<tbody>的方式，也直接影响XSS风险和性能。
<ul>
<li>如果后端返回HTML片段（如<code><tr>
<td>1</td>
<td>张三</td>
</tr>），可用tbody.insertAdjacentHTML('beforeend', htmlStr)，但必须确保HTML来自可信源，否则innerHTML等于开XSS后门
- 如果返回JSON数组，推荐用
document.createElement逐个创建<tr>和<code><td>，再<code>appendChild——安全、可控，且避免HTML解析开销
- 千万别用
tbody.innerHTML += ...，这会导致整个<tbody>重渲染，已有的事件监听器（如行点击）全部丢失
<li>如果表格列数动态变化，注意<code>colspan值要和实际<thead>列数一致，否则<code>#sentinel占位会错行
容易被忽略的边界情况
真实项目里，这些点往往拖垮体验：第一次加载完就滚动到底、网络失败后没提示、用户狂滚导致请求堆积、移动端touchmove兼容性差。
- 初始数据为空时，
#sentinel可能一上来就被观察到，需在首次加载完成后再observer.observe(sentinel)
- 请求失败要显示
#loading区域的错误文案，并加“重试”按钮，而不是静默失败
- 用
AbortController控制请求生命周期，用户切页或快速滚动时主动abort上一个未完成请求
- 移动端Safari对
IntersectionObserver在overflow: auto容器内支持不稳定，必要时降级为scroll事件 + getBoundingClientRect()手动判断
