overscroll-behavior 用于切断嵌套滚动容器间的事件传递链，仅在可滚动容器（overflow 非 visible 且内容溢出）滚动至边界时生效；典型场景为模态框或侧边栏滚动到底/顶时阻止背景页面滚动。
直接说结论： overscroll-behavior 不是用来“启用滚动”的，而是用来切断滚动事件在嵌套滚动容器之间的传递链——典型生效场景只有两个：模态框内滚动到底/顶时背景不跟着动；侧边栏/抽屉滚动到边界时不触发主内容区滚动。
为什么 modal 里加了 overscroll-behavior: none 还是会穿透
根本原因不是属性写错了，而是它压根没被触发。这个属性只对「实际可滚动的容器」起作用：
- 模态框元素本身必须有
overflow-y: auto（或scroll、overlay），且内容高度超出容器高度——否则没有滚动行为，自然不进入“边界溢出”判断 - 不能只给模态框设
overscroll-behavior: none，还要确保它的父级（比如body）没有transform、will-change或backface-visibility，这些会在 iOS Safari 中破坏滚动链路识别 - 如果模态框用的是
position: fixed，但内部用了display: flex且没设min-height: 0，子元素可能撑开容器导致 overflow 计算异常
contain 和 none 在 iOS 上的实际差异
这两个值在行为上差得挺细，但影响体验很关键：
-
overscroll-behavior: none：滚动到顶/底时完全冻结，无任何弹性反馈，手指松开后立刻停止——适合需要绝对静默的后台操作界面 -
overscroll-behavior: contain：允许本地弹性回弹（比如 iOS 上那种轻微拉伸再缩回的效果），但滚动事件绝不上抛——更适合用户需要“有反馈但不干扰”的场景，比如带长列表的设置弹窗 - 注意：
contain在旧版 Safari（15–16）中偶有失效，真机测试比模拟器更可靠；若发现回弹仍传到 body，可临时补一句touch-action: pan-y
多方向控制：为什么有时要写 contain none
单值写法（如 overscroll-behavior: none）会同时作用于 x 和 y 轴。但很多 UI 组件只需要约束一个方向：
- 横向轮播图容器：y 轴允许正常滚动（避免挡住导航栏），x 轴禁止溢出（防止滑过头触发页面左右晃动）→ 用
overscroll-behavior: auto none - 垂直列表 + 可展开详情的卡片：卡片内部需 y 轴弹性反馈（
contain），但禁止水平滚动（none）→ 写成overscroll-behavior: none contain是错的，正确是overscroll-behavior: contain none - 值顺序固定：第一个是 x 轴，第二个是 y 轴；浏览器不报错，但效果和预期相反
最容易被忽略的一点：这个属性只在「滚动真正发生并抵达边界」时才介入。如果容器内容刚好填满、没有滚动条，或者用了 overflow: hidden 且没设高度限制，overscroll-behavior 就只是 CSS 注释而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
