overscroll-behavior用于切断嵌套滚动容器间的滚动链，仅在子容器真实可滚动且触顶/底时生效；典型场景是模态框或侧边栏滚动到底/顶时阻止背景页面滚动。
为什么嵌套滚动时父元素会跟着滑动
这不是 JS 没写对，也不是 touchmove 阻止得不够狠，而是浏览器默认的 scroll chaining（滚动链）行为：当子容器滚动到边界后继续滑动，事件自动向上冒泡到可滚动的父级（比如 body 或 .page）。常见于弹窗内列表、侧边栏菜单、聊天窗口等场景。
关键点在于：该行为只在「子容器真实可滚动且已触顶/触底」时触发；若子容器根本没设 overflow-y: auto 或内容未超限，overscroll-behavior 不会生效。
必须设在子滚动容器上，不是父容器或弹窗 wrapper
常见错误是把 overscroll-behavior: contain 写在 .modal（position: fixed 容器）上——它本身不可滚动，属性直接被忽略。
- ✅ 正确位置：
.modal__content、.chat-list、.sidebar-menu等实际有overflow-y: auto且高度受限的内部区域 - ✅ 必须同时满足：有明确高度（如
max-height: 80vh）、overflow-y: auto（或scroll）、内容实际超出该高度 - ❌ 错误写法：
body { overscroll-behavior: none; }用于解决嵌套穿透——它管的是整个页面，不是子容器边界行为
contain 和 none 的实际区别与选型
contain 是嵌套滚动场景的默认推荐值；none 更激进，会同时干掉平台级反馈（如 iOS 下拉刷新提示、弹性回弹动画），容易让用户困惑。
-
overscroll-behavior: contain：子容器触顶/底后停止，不传事件给父级，但保留视觉回弹（用户能感知“到底了”） -
overscroll-behavior: none：完全禁用所有 overscroll 反馈，适合全屏弹窗等强隔离场景，但慎用于列表类组件 - 双轴控制更灵活：
overscroll-behavior-y: contain; overscroll-behavior-x: auto，比如允许横向轮播但禁止纵向穿透
兼容性兜底必须做，尤其 iOS 15 及以下
Safari 在 iOS 16.4+ 才原生支持 overscroll-behavior，旧版 iOS 仍需 JS 补位。但别全局 preventDefault，否则会锁死所有内部滚动。
- 优先检测支持：
CSS.supports('overscroll-behavior', 'contain') - 降级方案只作用于非目标滚动区：
touchmove时检查event.target.closest('.scrollable')，仅当不在可滚动元素内才调用preventDefault() - 避免
body { overflow: hidden }：它会重置滚动位置、导致键盘弹出后焦点不可见、部分 Android 强制失效
真正难的不是加一行 CSS，而是确认哪个元素在滚动、它是否真的可滚动、以及是否还有其他祖先参与了 scroll chain——这些都得靠 getComputedStyle(el).overflowY 和 DevTools 的 Layout 看板交叉验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
