overscroll-behavior-y写在body上无效，因iOS Safari等浏览器忽略根元素该属性；必须作用于满足overflow-y:auto、明确高度及内容真实溢出的子容器（如.modal-content）才生效。
overscroll-behavior-y 写在 body 上为什么没反应
因为 iOS Safari 和大多数现代移动端浏览器会直接忽略作用于 html 或 body 的 overscroll-behavior-y，哪怕你写了 body { overscroll-behavior-y: contain; }，computed 样式里也显示为灰色禁用状态。根本原因不是写法错，而是 WebView 层对根元素的 overscroll 行为做了硬编码锁定，CSS 无权干预。
真正起效的位置必须是「实际发生滚动的子容器」，比如：.modal-content、#chat-list、.scroll-view__content。它必须同时满足三个条件：
-
overflow-y: auto（或scroll），不能是hidden - 有明确高度（如
height: 80vh、max-height: 400px） - 内容真实溢出该高度（否则浏览器不认为它是可滚动容器）
contain 还是 none？选错会导致键盘失效
绝大多数场景下，overscroll-behavior-y: contain 是更安全的选择。它允许当前容器（如弹窗内列表）触顶/底时保留轻微弹性回弹，但阻止事件向上冒泡——既避免背景页被拖拽回弹，又不会破坏 input 获焦后浏览器自动滚动定位的能力。
overscroll-behavior-y: none 更激进：彻底禁用本层所有 overscroll 反馈，包括 iOS 下拉刷新提示、弹性动画等。但它容易让依赖滚动链的组件失效，比如：
立即学习“前端免费学习笔记（深入）”；
- 下拉刷新库靠
scroll事件判断触发位置 - 第三方弹窗组件内部的滚动锚定逻辑
- 某些 UI 框架的
focus自动滚动行为被一并拦截
iOS 15 及更早版本怎么兜底
iOS 15 及以下完全不识别 overscroll-behavior，JS 降级方案不能简单粗暴地全局 preventDefault()，否则会锁死所有内部滚动（比如弹窗里的长列表再也滚不动）。
可行做法是加白名单 + 精准拦截：
- 监听
document.body的touchmove，但只在非目标滚动区调用e.preventDefault() - 用
e.target.closest('.scrollable')判断是否命中允许滚动的元素（如.list、.modal-scroll） - 必须传
{ passive: false }，否则preventDefault()在 iOS Safari 15+ 和 Chrome 中被静默忽略 - 配合
body { position: fixed; top: -${window.scrollY}px; }防止页面跳动
为什么加了属性还是触发橡皮筋
常见失效原因不是兼容性问题，而是容器本身不满足滚动前提：
- 容器设了
overflow-y: auto，但高度是auto或未限制，导致内容未真实溢出 - 嵌套结构中只在最外层加了
contain，但内层列表（如.chat-list）没显式声明，滚动穿透仍会发生 - 用了
position: fixed遮罩弹窗，但只控制遮罩层样式，忘了给内部的可滚动区域单独加overscroll-behavior-y: contain - iOS 17.4 仍存在部分失效场景：比如嵌套
position: sticky元素时，overscroll-behavior可能静默丢弃
真正容易被忽略的是：这个属性只管“最后一厘米”——即滚动到底后继续拖拽的那一下回弹，它不控制正常滚动过程、不阻止 touchmove 冒泡、也不替代滚动锁屏或键盘避让逻辑。整条链路得各环节分别处理。
