overscroll-behavior: none 是唯一能精准禁用回弹而不影响滚动的原生CSS方案，但仅对实际滚动容器生效，html/body上被忽略；none彻底禁回弹与链式行为，contain仅阻外传而保留本层回弹；iOS 16.4前不支持，无完美JS fallback。
overscroll-behavior: none是目前唯一能**精准禁用回弹（overscroll）而不影响滚动本身**的原生 CSS 方案，但它有明确的生效边界和常见误用点。
为什么直接写在 html 或 body 上无效
移动端浏览器对根元素（html、body）的 overscroll 行为做了硬编码处理：overscroll-behavior 在这两个元素上被完全忽略。这不是 bug，是规范行为。
- 必须作用于实际发生滚动的容器，比如
div#app、.content或某个overflow-y: auto的局部区域 - 如果页面滚动由
html元素承载（常见于未设height: 100%的简单页面），那得先确认滚动容器是谁——可用 Chrome DevTools 的「Rendering」面板勾选「Scrolling FPS meter」验证 - 若使用了框架（如 Vue Router + keep-alive），滚动容器可能是动态插入的
router-view包裹层，需在 mounted 后加 class 并设样式
none 和 contain 的区别很关键
overscroll-behavior: none 是最彻底的：既不触发回弹，也不触发链式行为（如下拉刷新、历史滑动）；contain 则只阻止溢出影响外层，本层仍可回弹。
- 要完全禁掉下拉菜单滚动到底后的“透出”回弹，用
none - 如果弹层内允许自然回弹但不想影响背后页面（比如 Modal 中的长列表），用
contain - 别写成
overscroll-behavior: no-scroll或disable——只有auto/contain/none三个合法值
兼容性差时 fallback 不是“补功能”，而是换思路
iOS 16.4 之前（包括大量仍在使用的 iPhone 12/13 旧系统）完全不识别 overscroll-behavior，JS 也无法模拟原生回弹禁止效果。
- 不要尝试用
touchmove.preventDefault()全局拦截——它会杀死所有滚动惯性、破坏input聚焦、且 Safari 强制要求{passive: false}导致性能警告 - 真正可行的妥协：把“拉到顶触发刷新”改成“下拉 80px 后松手才刷新”，用
scrollend+scrollTop判断阈值，绕过对回弹位置的依赖 - 若必须视觉上“不露白边”，可对 iOS body { position: fixed; top: -webkit-transform: translateY(0); }，但注意这会让
position: fixed子元素相对 body 定位而非视口
容易被忽略的嵌套滚动陷阱
当页面存在多层可滚动容器（比如底部 TabBar 固定 + 中间内容区滚动 + 顶部搜索框下拉菜单），仅给最外层设 none 不够。
- 每个独立滚动容器都必须单独声明
overscroll-behavior，否则子容器溢出仍会触发父容器回弹 - 使用
position: fixed的全屏遮罩（如 Loading 层）内部若有可滚动区域，必须显式设overscroll-behavior: none，否则手指划过遮罩会点透到底层页面并触发回弹 - CSS 层叠上下文（如
transform、will-change）可能意外创建新的滚动上下文，导致样式未生效——检查父级是否无意中触发了新 stacking context
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
