用 overscroll-behavior: none 可禁用移动端滚动边界橡皮筋回弹，但仅 Chrome 63+、Firefox 59+、Safari 16.4+（iOS 16.4+）支持；必须作用于实际滚动容器（如 div#app），而非 html 或 body；overflow: hidden 无效，preventDefault 拦截易破坏体验；老 iOS 无完美 fallback，可降级为阈值检测或 scrollend 重置。
移动端滚动到边界时的“橡皮筋”回弹怎么关
用 overscroll-behavior 可以直接禁掉，但只在支持它的浏览器里生效——Chrome 63+、Firefox 59+、Safari 16.4+（iOS 16.4+）才认这个属性，老版本 Safari 完全不支持，别指望它兜底。
常见错误是把它写在 body 或 html 上，结果无效：因为移动端浏览器对根元素的 overscroll 行为有特殊处理，overscroll-behavior 在 html 和 body 上被忽略。必须作用于实际滚动的容器上。
- 要禁掉整个页面的回弹，得给内容区容器（比如一个
div#app）加overscroll-behavior: none - 如果只是想禁掉某个下拉菜单或弹层内部滚动到底后的回弹，就只给那个弹层的滚动容器设
overscroll-behavior: contain -
none是最彻底的：既不触发回弹，也不触发默认行为（比如下拉刷新、历史滑动）；contain会阻止溢出影响外层，但保留本层的回弹
为什么 overflow: hidden 不起作用
overflow: hidden 只控制是否显示滚动条和裁剪内容，完全不影响 overscroll 行为。哪怕你把 body 的 overflow 设成 hidden，手指划到顶/底依然会拉出白边回弹。
真正起作用的是 scroll chaining 的控制权，而这个控制权只由 overscroll-behavior 管理。
- 不要试图用
touchmove+preventDefault()拦截来模拟，容易误杀正常滚动、破坏惯性、影响性能 - 也不要用
-webkit-overflow-scrolling: touch，它和overscroll-behavior无关，且 iOS 已弃用 - 如果用了
position: fixed全屏遮罩，记得给遮罩内的可滚动区域单独设overscroll-behavior: none，否则点透到下面页面仍可能触发回弹
兼容性差时的 fallback 怎么做
没有通用 JS fallback 能完美复现原生回弹禁止效果。iOS 16.4 之前的所有版本（包括大量存量 iPhone）根本不响应 overscroll-behavior，这时候只能接受它存在，或者换思路。
真正能落地的妥协方案只有两个：
- 对老 iOS，把关键操作区域（如下拉刷新触发区）做高容错：比如刷新逻辑不依赖“拉到顶”的精确位置，而是靠按钮或下拉阈值检测
- 用
scrollend事件配合scrollTop判断，手动重置滚动位置（仅限局部容器），但要注意这会打断自然动效，用户感知明显 - 别碰
document.scrollingElement或body.scrollTop做强制归零——在 Safari 上极易引发闪烁或卡顿
容易被忽略的嵌套滚动陷阱
当页面里有多个滚动容器（比如侧边栏 + 主内容区），overscroll-behavior 的设置顺序和层级关系直接影响最终行为。
例如：主内容区设了 overscroll-behavior: contain，但侧边栏没设，手指在侧边栏滚到底后，仍可能穿透触发主内容区的回弹——因为 contain 只管“本层不传出去”，不管“外层会不会传进来”。
- 所有参与嵌套滚动的容器，只要不想被连带触发回弹，都得显式设
overscroll-behavior: none或contain - 如果父容器设了
none，子容器再设contain也无效：父级已阻断链路，子级失去传递机会 - 调试时用 Chrome DevTools 的 “Rendering” 面板勾选 “Scroll anchoring” 和 “Overscroll behavior”，能直观看到哪些区域还在响应 overscroll
真正麻烦的不是怎么写那行 CSS，而是得同时盯住容器结构、滚动上下文、iOS 版本分布和用户真实手势路径——稍一疏忽，回弹就从你以为关掉的地方又冒出来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
