overscroll-behavior必须加在包裹表格的块级容器（如.table-wrapper）上，而非table或tbody；该容器需设max-height和overflow-y:auto以触发滚动上下文，且避免transform等干扰样式。
表格本身不是滚动容器，overscroll-behavior 加在哪都没用
直接给 <table> 或 <tbody> 加 overscroll-behavior: none 不会生效——因为表格元素默认不产生滚动上下文。浏览器只对设置了 overflow 且内容实际溢出的块级容器应用该属性。
常见误操作：table { overscroll-behavior: none; } 或 tbody { overflow-y: auto; overscroll-behavior: contain; }，这两者都无效：前者没滚动能力，后者在标准 HTML 表格结构中无法触发 overflow（tbody 是内联格式化上下文，不响应 height/max-height）。
- 必须用一个包裹容器（如
<div class="table-wrapper">）来承载表格，并设overflow-y: auto - 这个包裹容器需有明确高度限制（如
max-height: 400px），且表格总高度超过它，才会出现滚动条 -
overscroll-behavior必须写在这个.table-wrapper上，而不是表格内部任何标签
overscroll-behavior-y: contain 比 none 更适合表格场景
表格滚动到底部时，用户常需要轻微弹性反馈（比如 iOS 的“橡皮筋”拉伸感）来确认已到末尾；用 none 会让滚动突然硬停，体验生硬，还可能干扰键盘唤起时输入框自动定位。
contain 只阻断事件向上传播，不破坏本地滚动惯性与回弹，同时保留下拉刷新兼容性（如果表格嵌在支持刷新的区域里）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
.table-wrapper { max-height: 400px; overflow-y: auto; overscroll-behavior-y: contain; } - 错误写法：
.table-wrapper { overscroll-behavior: none; }→ 同时禁掉 x/y 轴，且无必要地抹除 y 轴本地反馈 - 若表格只允许垂直滚动、但页面本身需水平滚动（如宽表+横向滚动），可用
overscroll-behavior: auto contain（x 轴保持默认，y 轴阻断）
iOS Safari 下表格滚动穿透的三大隐藏干扰项
即使样式写对，真机上仍可能穿透——问题往往不在 CSS，而在布局层被 Safari 静默忽略。
- 包裹容器或其任意祖先用了
transform（包括translateZ(0)）、will-change或backface-visibility→ 创建新层叠上下文，切断滚动链识别 - 父级是
display: flex或grid，但没给.table-wrapper设min-height: 0→ 子元素撑高导致overflow计算失败 -
<meta name="viewport">含user-scalable=no或height=device-height→ 旧版 Safari（15–16）会直接忽略overscroll-behavior
兜底方案：JS 动态控制比纯 CSS 更可靠
CSS 属性在 iOS 15.x 及更早版本中支持不稳定，尤其当表格嵌在复杂布局（如 modal 内、tab pane 中）时，建议加一层 JS 防御。
- 监听包裹容器的
touchmove，仅在顶部/底部临界点调用e.preventDefault()：if (el.scrollTop === 0 && e.touches[0].clientY > el.getBoundingClientRect().top) { e.preventDefault(); } - 必须传
{ passive: false }，否则 iOS 会静默忽略preventDefault() - 配合位移阈值（如
Math.abs(deltaY) > 5）避免误触发，防止轻微抖动卡住内部滚动 - 不要监听
document或body—— 这会导致整个页面滚动失效，包括表格内部滚动
真正容易被忽略的是：overscroll-behavior 管的只是“滚到头之后怎么办”，它不管表格能不能滚、页面为什么还在动。如果背景页跟着晃，第一反应不该是改属性值，而是检查那个 .table-wrapper 是否真正在滚动、有没有被 transform 或 flex 布局悄悄废掉。
