overscroll-behavior 不能直接阻止下拉刷新，需作用于实际可滚动的子容器才生效；ios safari 对根元素有底层锁定，body/html 上设置无效；contain 比 none 更推荐，兼顾反馈与冒泡拦截；需确保容器真实可滚动、各嵌套层均设置、并兼容旧环境。
overscroll-behavior 不能直接“阻止下拉刷新”，它只是切断滚动事件向上传播的链路。真正起效的前提是：你必须把它写在**实际可滚动的子容器上**，而不是 body 或 html；否则在 iOS Safari（包括 iOS 16.4 之前所有版本）中完全无效。
为什么写在 body 上没用
不是语法错，是浏览器内核硬限制：body { overscroll-behavior-y: contain } 在 iOS Safari 的 computed style 里会显示为灰色禁用状态。WebKit 对根元素的 overscroll 行为做了底层锁定，CSS 无权干预。Chrome 桌面版也需手动关闭 chrome://flags/#overscroll-history-navigation 才可能让根元素生效——但这不推荐，也不稳定。
overscroll-behavior-y: contain 和 none 怎么选
绝大多数场景该用 contain：
-
contain允许当前容器触顶/底时保留轻微弹性（用户感知为“有反馈”），但阻止事件向上冒泡 → 背景页不抖、不刷新，input获焦后仍能自动滚动定位 -
none彻底禁掉本层所有 overscroll 反馈（包括 iOS 下拉提示、弹性动画），容易让用户困惑；还可能让依赖scroll事件判断位置的下拉刷新库失效 - 横向轮播图只需约束 X 轴：
overscroll-behavior-x: contain; overscroll-behavior-y: auto - 全屏画布或游戏界面才考虑
none，且必须确认无第三方滚动依赖
加了属性还是触发橡皮筋？先检查这三件事
即使样式写对了，也可能因底层渲染条件未满足而失效：
- 目标元素是否真有滚动：用开发者工具看
overflow-y是否为auto或scroll，高度是否固定（如height: 70vh），内容是否真实溢出（滚动条可见） - 嵌套结构中每一层独立可滚动的容器都得单独加——只给弹窗 wrapper 加了，但内部
.list没加，滚动穿透仍会发生 - 老 iOS（iOS 15 及以下）、微信内置 WebView、QQ 浏览器等压根不识别该属性，
CSS.supports('overscroll-behavior', 'contain')判断为false，必须 JS 降级
uni-app / 微信小程序中怎么写
这些框架会把滚动逻辑封装进自定义节点，直接写在容器 class 上无效：
- uni-app 需穿透到内部滚动区：
::deep(.uni-scroll-view-content) { overscroll-behavior-y: contain; } - 微信小程序要作用于
scroll-view渲染后的实际内容节点，可用scroll-view::part(scroll-content)或在scroll-view上加data-scroll="true"后用 JS 动态注入样式 - 不要只给
position: fixed的遮罩层设样式，忘了内部的长列表才是滚动主体
overscroll-behavior。这时候没有完美 fallback，强行用 touchmove + preventDefault() 容易锁死滚动、破坏惯性、影响性能——不如接受它存在，或改用阈值检测+按钮触发这类更可控的交互方式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
