overscroll-behavior: none 在 ios 16.4+ 和新 android webview 中仅对满足三条件的非根滚动容器生效：overflow-y 为 auto/scroll、有显式高度、内容真实溢出；写在 body/html 上被硬编码忽略，devtools 中显示为灰色禁用。
overscroll-behavior: none 在 iOS 16.4+ 和较新 Android WebView 中能直接禁用橡皮筋，但不能写在 body 或 html 上——这些根元素被浏览器硬编码忽略，样式在 DevTools 中会显示为灰色禁用状态。
overscroll-behavior 必须作用于实际滚动的容器
你得找到那个真正“在滚”的元素，比如：
-
div#app、.content、.modal__content - uni-app 中的
::deep(.uni-scroll-view-content) - 微信小程序
scroll-view渲染出的内部节点（不是组件标签本身）
这个容器必须同时满足三个条件：
- 设置了
overflow-y: auto或overflow-y: scroll（hidden不行） - 有显式高度，如
height: 100vh、max-height: 500px（min-height或靠内容撑开不算） - 内容真实溢出（否则浏览器不认为它可滚动，属性不触发）
常见错误：给 position: fixed 弹层加样式，却忘了弹层里那个长列表才是滚动主体——回弹依然从列表底部透出。
none 和 contain 到底选哪个
绝大多数场景该用 overscroll-behavior: contain，不是因为它“不够强”，而是更安全：
-
contain：阻止滚动事件向父级冒泡（背景页不会被拖拽回弹），但保留本容器内轻微弹性（iOS 拉到底仍有视觉反馈），键盘唤起时 input 自动滚动定位不受影响 -
none：彻底禁掉本层所有 overscroll 行为，包括下拉刷新提示、历史滑动、甚至某些依赖滚动链的第三方库（如自定义下拉刷新）可能失效
横向轮播图只需约束 X 轴：overscroll-behavior-x: contain; overscroll-behavior-y: auto
别写成 no-scroll 或 disable——合法值只有 auto、contain、none
为什么加了还是触发橡皮筋？先检查这三件事
即使 CSS 写对了，也可能因底层渲染条件未满足而白忙一场：
- 容器没设
overflow-y: auto（或scroll）——hidden、未声明overflow都不算“可滚动” - 父级用了
position: fixed，但子容器没设显式高度，Safari 不认为它构成独立滚动上下文 - 容器或其祖先有
transform、will-change、contain: paint——这些会创建新层叠上下文，绕过overscroll-behavior控制链
嵌套滚动结构（如 modal > list > item）中，每一层独立可滚动的容器都得单独加，漏一层就可能穿透。
兼容性差时 JS 降级要极其克制
iOS 15 及更早、微信内置 WebView、QQ 浏览器等压根不识别 overscroll-behavior，这时候没有完美 fallback。
强行用 touchmove + e.preventDefault() 容易锁死所有滚动、破坏惯性、误杀输入框和地图手势：
- 务必加
{ passive: false }，否则 iOS Safari 会静默忽略preventDefault - 只对特定类生效，比如
e.target.closest('.no-bounce')，避免全局拦截 - 别用
body { position: fixed }锁定滚动——它会破坏 focus 状态、键盘逻辑，SSR 场景极易出错
真正能落地的妥协只有两个：用 scrollend + scrollTop 主动重置位置，或改用阈值检测代替“拉到顶”的精确判断。
最常被忽略的一点：老 iOS（如 iOS 12）连 -webkit-overflow-scrolling: auto 都需要配合使用，否则仅靠 CSS 几乎无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
