直接给设overflow-y: auto无效，因其为替换元素，需用包裹并设max-height和overflow-y: auto；intersectionobserver应监听末尾占位，绑定至外层容器，配合负rootmargin提前触发；追加行须用insertadjacenthtml或原生dom方法，禁用innerhtml +=；滚动跳动需统一高度、禁用height: auto、确保table-layout兼容性。
为什么直接给 <table> 加 <code>overflow-y: auto 会失效
浏览器不支持对 <table> 元素直接设置 <code>overflow，多数情况下会被忽略，导致容器无法产生滚动条，scroll 或 IntersectionObserver 都监听不到“到底部”。这不是 CSS 写错了，是 HTML 规范限制 —— <table> 是替换元素（replaced element-like），其渲染行为由表格模型强约束。
<p>必须用一个包裹容器来承载滚动逻辑：</p>
<ul><li>外层 <code><div id="table-wrapper" style="max-height: 400px; overflow-y: auto">
<li>里面放 <code><table><tbody></tbody></table>
document.getElementById('table-wrapper') 上，不是 window，也不是 <table>
<h3>
<code>IntersectionObserver 怎么监听局部容器底部
监听目标不能是整个容器，而应是插入在 <tbody> 末尾的占位 <code><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> 或 <code><tfoot> 里 —— 它必须在 <code><tbody> 最末，否则位置计算错乱 <h3>用 <code>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 组件实例 <li>如果表格有固定列宽或 <code>colgroup，追加前确保新<td> 数量与 <code>colgroup列数一致，否则布局错位加载后滚动位置跳动？问题不在 JS，而在 CSS 高度控制
插入新行后滚动条“上蹿”或“下掉”，本质是浏览器重排时无法预估新增内容高度。这不是 JS 能“阻止”的，而是布局没控住。
必须满足三个条件才能稳定锚定：
- 所有
<tr> 或其 <code><td> 必须有明确高度：用 <code>height、min-height或line-height，禁用height: auto且子元素浮动/绝对定位 <tbody> 不设 <code>height，让它自然撑开；但外层<div id="table-wrapper"> 必须有 <code>max-height+overflow-y: auto- 如果行高不均（比如含多行文本、图片），用
aspect-ratio或grid-template-rows配合minmax()强制最小高度，比 JS 计算 offsetTop 更可靠
复杂点往往被忽略：当表格列使用
table-layout: fixed时，<col>宽度优先级高于<td> 内联样式，此时新增 <code><td> 若没显式设 <code>width，可能挤压其他列 —— 这也会间接引发跳动。 - 所有
- 遍历数据数组，对每项调用
