overscroll-behavior在HTML表格中基本无效，因<table>、<tbody>等原生表格元素默认不可滚动且不支持overflow，必须将其包裹在显式设overflow-y:auto和max-height的<div>容器中，并将该属性作用于该容器；优先选用contain以保留局部弹性回弹并阻止事件冒泡。
overscroll-behavior 在 HTML 表格中基本无效——表格元素（<table>、<tbody>、<tr> 等）默认不可滚动，且无法直接设置 overflow，因此该属性压根不会被浏览器识别。
为什么给 <table> 或 <tbody> 加 overscroll-behavior 没用
浏览器只对「有明确 overflow 且内容真实溢出」的块级容器应用 overscroll-behavior。原生表格结构不支持 overflow-y: auto 直接生效：<tbody> 不是块容器，<table> 的高度行为由内容驱动，无法可靠约束滚动区域。
- 给
<table>设max-height+overflow-y: auto→ 浏览器忽略，表格仍撑开 - 给
<tbody>加display: block强转块级 → 破坏表格语义和样式，border-collapse失效，单元格对齐错乱 - 在
<table>外层套<div class="table-scroller">却忘了设overflow-y: auto→ 属性无载体，静默失效
真正有效的写法：把表格包进可滚动的 div 容器
必须将表格嵌入一个显式可滚动的父容器，并把 overscroll-behavior 落在该容器上。这个容器才是浏览器认可的「滚动上下文」。
- 容器需设
max-height（如max-height: 400px）或固定height - 必须设
overflow-y: auto（不能是visible或hidden） -
overscroll-behavior写在该容器上，不是表格本身 —— 例如：.table-scroller { overflow-y: auto; overscroll-behavior: contain; } - 若容器用了
display: flex，记得加min-height: 0，否则子表格可能撑高导致 overflow 失效
contain 还是 none？表格场景优先选 contain
表格常含长数据行，用户习惯在滚动到底/顶时“拉一下”确认边界。用 overscroll-behavior: contain 能保留 iOS 橡皮筋、Android glow 效果，同时阻断向上传播；而 none 会让表格突然硬停，易被误判为卡死。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
contain在 Safari 15–16 中偶有失效，但比none更少触发touchmove卡顿 - 若表格用于后台管理界面且需绝对静默（如监控面板），再考虑
none - 禁止横向滚动穿透（比如宽表格拖拽过头）：用
overscroll-behavior: none contain（注意顺序：x 轴在前，y 轴在后）
iOS Safari 下表格滚动穿透的兜底方案
即使 CSS 写对，在 iOS Safari 15.x 真机上仍可能穿透——它会因祖先元素的 transform、will-change 或 viewport 设置跳过 overscroll-behavior 判断。
- 检查
.table-scroller所有祖先是否含transform（包括translateZ(0)）→ 删除或重构布局 - 避免
<meta name="viewport" content="user-scalable=no">，旧版 Safari 可能因此忽略该属性 - JS 补漏只需一行：
document.querySelector('.table-scroller').addEventListener('touchmove', e => e.preventDefault(), { passive: false });，但必须配合overscroll-behavior使用，否则会禁掉所有滚动
最常被忽略的是：这个属性从不解决“表格能不能滚”，只管“滚到头之后别带偏背景”。如果背景还在动，说明你没把 overscroll-behavior 加在那个真正滚动的 <div> 上，或者它根本没触发滚动条。
