overscroll-behavior 用于阻止滚动边界穿透，而非启用滚动；需作用于真正可滚动的元素（如带 overflow-y:auto 且有高度限制的子容器），避开 ios safari 的 transform 干扰，并按 x y 顺序设置双值。
直接说结论：overscroll-behavior 不是用来“让元素能滚动”的，而是用来“管住它滚到头之后别乱动别人”的。写错位置、没设 overflow、碰上 iOS Safari 的 transform 干扰，90% 的失效都出在这三处。
必须作用在真正可滚动的元素上，不是 modal 容器本身
很多人给 .modal（position: fixed 的壳子）加 overscroll-behavior: none，结果毫无反应——因为这个元素通常没有 overflow，浏览器压根不把它当滚动容器看。
- 正确做法是找到内部那个带
overflow-y: auto的内容区，比如.modal__content或.drawer__scroller - 确保它有明确高度限制（如
max-height: 80vh）且内容实际溢出，否则滚动条都不出现，属性自然不触发 - Flex/Grid 布局里容易漏掉
min-height: 0，导致子元素撑高、overflow 计算失准
contain 和 none 的区别不是“有没有用”，而是“有没有回弹”
这两个值都阻断滚动向上传播，但对用户手指的反馈完全不同：
-
overscroll-behavior: contain：允许 iOS 的橡皮筋回弹、Android 的 glow 效果，仅切断事件冒泡 → 推荐作为弹窗默认值 -
overscroll-behavior: none：连本地回弹都干掉，滚到顶/底就硬停 → 适合地图、画布、自定义下拉刷新等需完全隔离的场景 - 别写
auto：这是默认值，就是你正在被穿透的那个状态
iOS Safari 15–16 下失效的典型原因
真机测试时发现加了也不生效？大概率踩进了 Safari 的兼容性坑：
- 模态框或任意祖先元素用了
transform（哪怕只是transform: translateZ(0)）、will-change或backface-visibility→ 创建新层叠上下文，滚动链路识别失败 -
<meta name="viewport" content="user-scalable=no">或height=device-height→ 旧版 Safari 会忽略该属性 - 只写了
overscroll-behavior: contain，但没配overflow-y: auto→ 属性被浏览器静默忽略，控制台不报错也不警告
需要单独控制 X/Y 轴时，顺序不能错
单值写法（如 contain）会同时作用于 x 和 y 轴；多方向控制必须按固定顺序：第一个是 x 轴，第二个是 y 轴。
- 横向轮播图容器：禁止左右滑过头（x 轴），但允许页面正常上下滚（y 轴）→ 用
overscroll-behavior: none auto - 垂直列表卡片，卡片内支持上下弹性（y 轴），但禁用意外水平滑动（x 轴）→
overscroll-behavior: none contain（注意不是contain none） - 有
overscroll-behavior-x和overscroll-behavior-y单独属性，但兼容性略差，优先用双值 shorthand
最常被忽略的一点：这个属性只在「滚动真实发生并抵达边界」时才介入。如果内容刚好填满、容器不可滚动、或者滚动链被 transform 断开，再怎么写 none 都只是 CSS 注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
