overscroll-behavior-y 对 <table> 无效，因其非滚动容器；必须作用于其父包裹层（如 .table-wrapper），且该层需满足：明确高度、overflow-y: auto、内容真实溢出、无 transform 等干扰属性。
overscroll-behavior-y 对 <table> 元素本身无效——表格不是滚动容器，必须作用于其父级包裹层，且该层需满足可滚动前提。
为什么直接给 <table> 加 overscroll-behavior-y: contain 没用
浏览器只对「有明确 overflow 且内容溢出」的块级容器应用 overscroll-behavior。<table> 默认是 display: table，既不响应 overflow，也不产生滚动条。即使你强行设 overflow-y: auto 在 <table> 上，多数浏览器会忽略（尤其 Safari），因为表格渲染模型不支持原生滚动截断。
- 常见错误写法：
table { overscroll-behavior-y: contain; }→ 浏览器静默忽略 - 真正生效目标：必须是
<table>的**直接父容器**，且该容器要承担滚动职责 - 若表格嵌套在
flex或grid容器里，还要检查父容器是否漏了min-height: 0，否则高度计算失准，滚动不触发
overscroll-behavior-y: contain 必须加在哪个元素上
它必须加在包裹 <table> 的、具备以下全部条件的容器上：
- 设置了明确的高度约束（如
max-height: 400px、height: 60vh或flex: 1+min-height: 0） - 显式声明
overflow-y: auto或scroll（不能是visible或hidden） - 内部
<table>总高度 > 容器自身高度（即真实溢出，滚动条可见） - 该容器 DOM 路径上无
transform、will-change或backface-visibility（iOS Safari 15–16 会因此断链）
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="table-wrapper"> <table>...</table> </div>
对应 CSS：
.table-wrapper {
max-height: 400px;
overflow-y: auto;
overscroll-behavior-y: contain;
}
表格场景下 contain 比 none 更合适的原因
在表格这类数据展示场景中，用户常需确认是否已到顶部/底部，contain 提供的本地反馈更自然：
-
overscroll-behavior-y: contain：允许 iOS 橡皮筋拉伸、Android glow 效果，仅阻断事件向上传播 → 表格滚到底后松手自动回弹，背景页不动 -
overscroll-behavior-y: none：边界硬停，无任何弹性反馈 → 用户可能误判是否到底，键盘唤起时表格内输入框也可能无法自动滚动定位 - 若表格用于横向滚动（如宽列报表），只需禁 y 轴穿透，用
overscroll-behavior-y: contain即可，x 轴保持默认行为
iOS Safari 15–16 下仍穿透？这些点必须手动检查
即使 CSS 写对，在旧版 iOS Safari 中仍可能失效，关键干扰项不是代码，而是布局上下文：
- 检查
.table-wrapper的任意祖先（包括 body、modal overlay、甚至 html）是否用了transform—— 即使只是transform: translateZ(0)也会创建新层叠上下文，导致滚动链识别失败 - 确认 viewport meta 中没写
user-scalable=no或height=device-height，这两项会让 Safari 15.x 直接跳过 overscroll 控制 - 真机测试不可替代：模拟器常表现正常，但实际触摸滑动时仍穿透
- 兜底 JS 不可省：弹窗或表格区域激活时，给 document.body 加
{ passive: false }的touchmove监听，并用e.target.closest('.table-wrapper')白名单判断是否阻止默认行为
最容易被忽略的是：overscroll-behavior-y 只管“滚到头之后那一瞬”，不管“能不能滚”。如果表格高度没撑满容器、父容器没设 min-height: 0、或者祖先用了 transform，属性就等于没写。
