移动端滚动回弹由html元素控制，非body；-webkit-overflow-scrolling: touch仅对实际滚动容器（即html）生效，且仅限旧版ios safari/android webview；现代浏览器默认支持，需确保html无overflow:hidden、overscroll-behavior:none及干扰合成层的属性，并避免无条件preventdefault。
移动端的“滚动回弹”不是靠 body 开启的，它本质是浏览器原生行为，body 本身不控制这个效果——真正起作用的是 html 元素的滚动容器属性和 WebKit 特定样式。
为什么给 body 加 -webkit-overflow-scrolling: touch 没用
这个属性必须作用于实际滚动容器，而移动端页面的根滚动容器是 html 元素，不是 body。写在 body 上等于对一个普通块级元素设滚动增强，浏览器直接忽略。常见现象是：加了但滚动依然粘滞、没弹性、松手后不回弹。
-
-webkit-overflow-scrolling: touch只在 iOS Safari 和部分旧 Android WebView 中生效，现代 Chrome / Edge 已默认启用弹性滚动，无需此声明 - 若你用的是
body { overflow: auto }并试图让它滚动，那实际滚动层仍是html，body只是内容容器 - 某些 CMS 或微前端框架会动态替换
html内容，需确认当前文档的html是真实根节点，而非 iframe 嵌套内的
html 元素必须满足的三个条件才能触发回弹
回弹（overscroll bounce）依赖底层滚动引擎，不是 CSS 能“开关”的功能，但可通过以下配置确保它不被禁用：
- 移除
html { overflow: hidden }或html { overscroll-behavior: none }—— 后者会直接关掉回弹 - 确保
html没有position: fixed或transform等触发新层叠上下文/合成层的属性，否则可能干扰滚动链 - 不要在
touchstart/touchmove中无条件调用e.preventDefault()—— 这会阻断原生滚动事件流，导致回弹消失
移动端滚动卡顿、无回弹的典型诱因
不是“没开”，而是被意外抑制了。重点排查这些代码：
- 弹窗遮罩层启用时写了
document.documentElement.style.overflow = 'hidden'—— 这会让整个页面失去滚动能力，自然也没回弹 - 监听了
document.ontouchmove = e => e.preventDefault()且没加条件判断 —— 直接废掉所有原生滚动行为 - 页面根容器用了
height: 100vh+overflow: hidden布局，导致html实际不可滚动，回弹无从谈起 - 使用了第三方滚动库（如 iScroll、better-scroll）并启用了
preventDefault，它们接管滚动后，原生回弹就失效了
验证回弹是否正常工作的最简方法
不用写一行 JS，直接打开 DevTools → Elements → 选中 html 元素，检查 computed 样式里是否有：
-
overscroll-behavior: auto（默认值，允许回弹） -
overflow: visible或overflow: auto（确保可滚动） - 没有
transform、opacity、filter等强制创建合成层的属性干扰滚动线程
然后在真机上快速拖拽页面顶部或底部，松手——如果出现轻微超滚 + 自动回弹，说明机制完好；如果戛然而止或惯性不足，问题大概率出在上面某条抑制逻辑上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
