overscroll-behavior-y: contain仅拦截滚动容器触顶/底后的弹性回弹，不阻止正常滚动穿透；失效主因是未设overflow-y:auto、作用于html/body根元素、或iOS嵌套sticky导致静默失效。
overscroll-behavior-y: contain 能控制滑动到边界后的弹性回弹，但它只管“最后一厘米”，不是滚动锁屏开关，也不能替代 JS 交互控制。
为什么 overscroll-behavior-y: contain 在弹窗里没效果？
它只拦截「超出滚动边界后的拖拽」，不阻止正常滚动过程中的穿透。常见失效原因包括：
- 容器没设
overflow-y: auto或scroll—— 设成hidden就没滚动，自然也不触发 overscroll - 直接写在
html或body上 —— 它对根元素无效，必须作用于子级可滚动容器（如.chat-list、.drawer-content） - iOS Safari 嵌套
position: sticky元素时静默失效（iOS 17.4 仍存在） - Android Chrome v120+ 支持较稳，但老 WebView（如微信 X5）可能完全忽略
哪些场景下 overscroll-behavior-y 真有用？
它适合解决明确的「滚动溢出穿透」问题，比如：
- 固定高度的聊天消息流容器：拉到底后继续甩手，不透到背景页
- 下拉筛选面板或抽屉式侧边栏：触顶/触底时不触发父层回弹
- 轮播图容器需保留横向弹性（
overscroll-behavior-x: auto），但禁用纵向穿透（overscroll-behavior-y: contain）
注意：overscroll-behavior 不阻止 touchmove 冒泡 —— 如果背景页监听了全局 touchmove 并做了 scrollY 锁定，依然会冲突。
立即学习“前端免费学习笔记（深入）”；
scroll-behavior: smooth 和回弹效果是两回事
别混淆这两个概念：scroll-behavior: smooth 控制滚动动画是否平滑（跳转、history 滚动），而 overscroll-behavior-y 只管边界外那一段弹性反馈。移动端上：
- iOS Safari 直到 15.4 才支持
scroll-behavior: smooth，旧版直接丢弃规则 - 微信 X5 等 WebView 常静默降级，无法保证行为一致
- 它对 JS 主动调用（如
Element.scrollTo()）无影响，必须用 JS 方案兜底
真正容易被忽略的是：回弹效果从来不是单一样式能搞定的事。overscroll-behavior-y 只管“最后一厘米”，而滚动锁定、键盘避让、touchmove 精准拦截、scrollRestoration 等环节都得各自处理。
