先检查是否加了-webkit-overflow-scrolling: touch，该属性是iOS Safari滚动流畅的刚需，必须加在外层滚动容器上，且需配合明确高度和overflow-y: auto/scroll才生效。
移动端滚动卡顿或不响应，先检查 -webkit-overflow-scrolling
iOS Safari 对滚动行为有特殊限制，没加 -webkit-overflow-scrolling: touch 时，拖拽松手后常回弹、无惯性、响应迟钝。这不是可选项，是刚需——尤其在表格、长列表、代码块等场景。
这个属性必须加在外层滚动容器上（比如包裹 <table> 的 <div>），不能加在 <table> 或更高层父元素上。还要注意：如果该容器或其任意祖先用了 transform、will-change、filter 等触发合成层的 CSS，滚动事件可能被拦截，导致失效。
- 真机测试前务必确认该属性已生效，DevTools 模拟器无法复现此问题
- 现代 iOS 已逐步弃用该属性，但 iOS 15 及更早版本仍严重依赖它
- 若使用 Vue/React 动态渲染内容，首次挂载后 DOM 高度未稳定，需手动触发重绘（如
el.style.transform = 'translateZ(0)'）
给表格加 overflow-x-auto 为什么没用？
直接给 <table> 加 overflow-x-auto 无效——<table> 默认是 display: table，不响应 overflow。必须用 <div> 包裹，并满足三个硬条件：
- 外层
<div>要设width: 100%+min-width: fit-content（旧版 Safari 可退为min-width: 600px） -
<table>必须设table-layout: fixed，且不要设width: 100%（会覆盖列宽逻辑） -
<th>和<td>都要加white-space: nowrap，否则单元格内换行会导致高度突变、列宽计算错乱
另外，如果表格父容器是 display: flex，必须给该 <div> 加 min-width: 0，否则 flex item 默认不收缩，滚动直接锁死。
立即学习“前端免费学习笔记（深入）”；
overflow-y-auto 在 flex 布局里失效怎么办？
常见现象：加了 overflow-y-auto 和 h-64，但滚动条就是不出现。根本原因不是类名写错，而是 flex 布局干扰了高度计算：
- 父容器是
flex且未设flex-shrink: 0，子容器被压缩，实际没溢出 - 子容器本身是
flex-col+flex-1，撑满父级后失去“可溢出”的边界 - 错误地把
overflow-y-auto加在父级，而真正需要滚动的是内部 flex 子项
正确做法：把 overflow-y-auto 加到具体需要滚动的子容器上，并确保它有明确高度约束（如 max-h-96），而不是依赖 min-h- 类——后者无法触发溢出逻辑。
滚动区域里的点击/悬停事件失效
不是 JS 绑定漏了，大概率是 overflow 容器裁剪了 pointer-events 区域，尤其出现在嵌套滚动或使用 transform 的容器中。
典型表现：鼠标悬停无反馈、点击无响应，但滚动本身正常。排查重点：
- 检查滚动容器或其祖先是否设置了
pointer-events: none - 确认是否有
overscroll-behavior: contain，它会阻止滚动传递，需移除 - 避免在滚动容器内使用
will-change: transform或多层transform嵌套
最稳妥的修复方式是给滚动容器显式加 pointer-events: auto，并确保其所有祖先都未禁用事件捕获。
