ios safari 默认仅对 body 启用原生惯性滚动，普通容器需配合 -webkit-overflow-scrolling: touch 及明确高度（如 height 或 max-height）才能实现流畅滚动，且须避免父级 overflow: hidden 或 flex 未设 min-h-0 等常见陷阱。
为什么 overflow-y: scroll 在移动端没惯性
加了 overflow-y: scroll 却一松手就停，不是代码写错了，是 iOS Safari 默认只对 启用原生惯性滚动。普通容器哪怕设了 scroll，也只是“能滚”，不“带劲”。Android Chrome 虽稍好，但没显式配置也容易卡顿。
-webkit-overflow-scrolling: touch 还得配高度
这个属性虽被标记为废弃，但在 iOS 17 甚至刚发布的 iOS 18 beta 中仍是刚需。但它不会自动生效，必须同时满足：
-
-webkit-overflow-scrolling: touch必须写在设置了overflow-y: scroll或auto的元素上 - 该元素必须有明确的
height或max-height（百分比也行，但父级得有确定高度） - 避免父容器是
overflow: hidden或 flex 容器未设min-height: 0—— 这会截断滚动上下文 - 慎用
100vh：iOS 地址栏收放时vh会跳变，改用100dvh（iOS 16.4+ 支持）或 JS 动态设高
flex 布局里滚动容器突然失效
常见于 flex flex-col 主容器中嵌套一个 overflow-y: scroll 子项，结果滚不动或一滚就卡。根本原因是 flex 项默认 min-height: auto，会撑开容器而不是收缩适配。
修复只需一行：
class="flex-1 min-h-0 overflow-y-scroll"
其中 min-h-0 是关键 —— 它覆盖 flex 默认的基线行为，让滚动区域真正“守界”。
fixed 侧边栏导致主内容滚动异常
抽屉菜单用 fixed 定位后，<main></main> 出现多余垂直滚动条？不是 JS 动画问题，而是侧边栏容器本身仍参与文档流计算高度。
典型错误结构：
<div class="hidden"> <div class="fixed inset-0">...</div> </div>
正确做法是把 fixed 直接加在外层容器上，并确保它不占布局空间：
- 移除内层
fixed，把fixed z-50 inset-0加到最外层<div id="mobile-menu"> <li>加 <code>overflow-y-auto到内容区（不是整个 fixed 容器），并限制高度如max-h-[calc(100vh-4rem)] - 主内容区保持
lg:pl-72不变 —— 它只影响大屏，移动端 fixed 导航已脱离流，不影响高度计算
真正难调的不是加哪几个类，而是哪个父容器悄悄“多算了一行高度”。每次怀疑滚动异常，先检查最近三层父元素的 display、min-height 和是否意外继承了 overflow。
