直接给<table>设overflow-y: auto无效，因其为替换元素，需用<div>包裹并设max-height和overflow-y: auto；IntersectionObserver应监听<tbody>末尾占位<tr>，绑定至外层容器，配合负rootMargin提前触发；追加行须用insertAdjacentHTML或原生DOM方法，禁用innerHTML +=；滚动跳动需统一<tr>高度、禁用height: auto、确保table-layout兼容性。
为什么直接给 <table> 加 overflow-y: auto 会失效
浏览器不支持对 <table> 元素直接设置 overflow，多数情况下会被忽略，导致容器无法产生滚动条，scroll 或 IntersectionObserver 都监听不到“到底部”。这不是 CSS 写错了，是 HTML 规范限制 —— <table> 是替换元素（replaced element-like），其渲染行为由表格模型强约束。
必须用一个包裹容器来承载滚动逻辑：
- 外层
<div id="table-wrapper" style="max-height: 400px; overflow-y: auto"> - 里面放
<table><tbody></tbody></table> - 滚动事件或 Observer 必须绑定在
document.getElementById('table-wrapper')上，不是window，也不是<table>
IntersectionObserver 怎么监听局部容器底部
监听目标不能是整个容器，而应是插入在 <tbody> 末尾的占位 <tr id="sentinel"><td colspan="3"></td></tr>。它只是个“探测点”，不占视觉空间，但能被 Observer 精准捕捉。
关键参数和操作：
立即学习“前端免费学习笔记（深入）”；
- 初始化时传
{ root: document.getElementById('table-wrapper'), rootMargin: '0px 0px -50px 0px' }：负rootMargin表示“提前 50px 触发”，避免用户拉到最底才动 - 回调中只处理
entries[0].isIntersecting === true，防止误判 - 每次加载前调用
observer.unobserve(sentinel)，防重复；插入新行后立即observer.observe(sentinel)恢复监听（不要删 DOM，重用） - 千万别把
sentinel放在<thead>或<tfoot>里 —— 它必须在<tbody>最末，否则位置计算错乱
用 insertAdjacentHTML('beforeend', ...) 追加行，别碰 innerHTML
后端返回 HTML 片段（如 <tr><td>1</td><td>张三</td></tr>）时，tbody.insertAdjacentHTML('beforeend', htmlStr) 是最简方案，但前提是 HTML 来源可信。若不可信，innerHTML 等同于开 XSS 后门。
更安全可控的做法是解析 JSON 后用原生 DOM 方法构建：
- 遍历数据数组，对每项调用
document.createElement('tr')和appendChild(document.createElement('td')) - 最后用
DocumentFragment批量 append，减少重排次数 - 绝对禁用
tbody.innerHTML += htmlStr：它会销毁已有<tr>上所有事件监听器（比如点击行选中、右键菜单），且破坏 React/Vue 组件实例 - 如果表格有固定列宽或
colgroup，追加前确保新<td>数量与colgroup列数一致，否则布局错位
加载后滚动位置跳动？问题不在 JS，而在 CSS 高度控制
插入新行后滚动条“上蹿”或“下掉”，本质是浏览器重排时无法预估新增内容高度。这不是 JS 能“阻止”的，而是布局没控住。
必须满足三个条件才能稳定锚定：
- 所有
<tr>或其<td>必须有明确高度：用height、min-height或line-height，禁用height: auto且子元素浮动/绝对定位 -
<tbody>不设height，让它自然撑开；但外层<div id="table-wrapper">必须有max-height+overflow-y: auto - 如果行高不均（比如含多行文本、图片），用
aspect-ratio或grid-template-rows配合minmax()强制最小高度，比 JS 计算 offsetTop 更可靠
复杂点往往被忽略：当表格列使用 table-layout: fixed 时，<col> 宽度优先级高于 <td> 内联样式，此时新增 <td> 若没显式设 width，可能挤压其他列 —— 这也会间接引发跳动。
