overscroll-behavior在现代浏览器中基本可用，但ios 16.4前、android webview 50–59等环境完全不支持，非写错而是浏览器未实现；必须作用于满足overflow-y:auto、明确高度及内容溢出的实际滚动容器，而非html或body。
直接结论： overscroll-behavior 在现代浏览器中基本可用，但 iOS 16.4 之前、Android WebView 50–59、旧版 Samsung Internet 等环境完全不支持——不是“写错”，是浏览器压根没实现，CSS 声明会被静默忽略。
哪些浏览器版本真正支持 overscroll-behavior
必须按实际运行环境判断，不能只看桌面 Chrome 版本：
- Chrome 桌面/Android：63+ 支持；50–59（常见于 Android 7–9 的 App 内置 WebView）完全不识别，Computed Styles 里查不到该属性
- Safari macOS：14.1+ 支持；iOS Safari：14.5+ 开始有基础支持，但仅 16.4+ 才真正响应
none（此前none行为等同于contain） - Firefox：59+ 支持，较稳定
- Edge：79+（基于 Chromium）支持
- Samsung Internet：4+ 支持，但 12.0 之前对
none处理不一致
关键点：overscroll-behavior: none 在 iOS 16.4 之前和大部分存量 Android App 中，等于没写。别指望它禁掉下拉刷新或橡皮筋回弹。
为什么写在 body 或 html 上无效
移动端浏览器对根元素的 overscroll 行为有特殊处理机制，overscroll-behavior 在 html 和 body 上被明确忽略——这是规范行为，不是 bug。
- 必须作用于实际滚动容器，例如
div#app、.modal__scroller、.chat-list - 该元素需满足：有
overflow-y: auto（或scroll）、有可滚动内容、高度受限（如max-height） - 如果用了
position: fixed全屏遮罩，遮罩内部的滚动区也得单独加overscroll-behavior，否则手势可能点透到底层
兼容性差时 JS 补位的关键细节
旧环境无法靠 CSS 解决，必须用 JS，但容易踩坑：
- 监听
touchmove时，必须显式传{ passive: false }，否则preventDefault()在 Android Chrome 56+ 及 WebView 中会被静默忽略 - 只对目标滚动容器绑定，不要监听
document——否则整个页面滚动锁死 - 触发条件要精确：
el.scrollTop === 0 && e.touches[0].clientY > el.getBoundingClientRect().top（触顶），或el.scrollTop >= el.scrollHeight - el.clientHeight（触底） - 组件卸载时务必调用
removeEventListener，否则手势残留会导致后续页面滚动异常
真正难的不是写一行 CSS，而是确认当前运行环境是否真把那个 div 当作独立滚动上下文——尤其在混合渲染的 App 容器里，WebView 版本、是否启用硬件加速、父层是否用了 transform，都会让同一个声明产生截然不同的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
