移动端父子滚动嵌套冲突本质是浏览器默认开启 scroll chaining，解决关键是在真正可滚动的子容器上设置 overscroll-behavior: contain，需满足有明确高度、overflow-y: auto 且内容真实溢出。
移动端父子滚动嵌套冲突，本质不是“子容器滚了父容器也跟着滚”，而是浏览器默认开启了 scroll chaining——子容器触顶/底后，继续滑动会把事件自动传给上层可滚动容器。解决它，关键不在阻止 touchmove，而在精准切断滚动链。
必须把 overscroll-behavior 加在真正滚动的子容器上
常见错误是写在模态框 wrapper（如 .modal）上，但它通常只是 position: fixed 容器，本身不可滚动，CSS 属性直接被忽略。
- ✅ 正确目标：实际设置了
overflow-y: auto且内容超高的内部区域，比如.modal__content、.chat-list、.sidebar-menu - ✅ 必须同时满足：有明确高度约束（
max-height: 80vh）、overflow-y: auto（或scroll）、内容真实超出该高度 - ❌ 错误写法：
body { overscroll-behavior: none; }—— 这管的是整页回弹，不是嵌套穿透
contain 和 none 别乱选，优先用 contain
overscroll-behavior: contain 是嵌套滚动场景的默认推荐值；none 更激进，会干掉 iOS 下拉刷新提示、弹性回弹等平台级反馈，用户容易困惑。
-
contain：子容器触顶/底后停止，不传事件给父级，但保留视觉回弹（用户能感知“到底了”） -
none：完全禁用所有 overscroll 反馈，适合全屏弹窗等强隔离场景，慎用于列表类组件 - 双轴控制更灵活：
overscroll-behavior-y: contain; overscroll-behavior-x: auto，比如允许横向轮播但禁止纵向穿透
iOS 15 及以下必须 JS 补位，但别全局 preventDefault
iOS 16.4+ 才原生支持 overscroll-behavior，旧版 Safari 需降级。但直接在 touchmove 里对整个 document 调用 preventDefault() 会锁死所有内部滚动，不可取。
立即学习“前端免费学习笔记（深入）”；
- 先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 降级逻辑只作用于非目标滚动区：检查
event.target.closest('.scrollable')，仅当不在可滚动元素内才调用preventDefault() - 避免
body { overflow: hidden }：它会重置滚动位置、导致软键盘弹出后焦点不可见，部分 Android 甚至强制失效
Flex 布局下滚动失效？先确认父容器是否真有“溢出”
给父容器加了 overflow: hidden 却仍可滚，大概率是因为它根本没被定高——display: flex 的父容器若没设 height 或 max-height，会被子项撑开，永远不满足“溢出”条件。
- 外层必须有明确高度约束，例如：
html, body { height: 100%; }+.app { height: 100vh; display: flex; } - 要滚动的区域不能是
flex: 1的 item 本身，得额外包一层.scroll-area，且该层必须加min-height: 0 - 别把
overflow-y: auto直接加在flex: 1元素上——它会让整个布局区滚动，而不是仅内容区
真正难的不是加一行 CSS，而是打开 DevTools 确认：哪个元素在滚动？它的 scrollHeight 是否真大于 clientHeight？它的父容器有没有被 flex 撑开？这些细节一错，overscroll-behavior 就成了摆设。
