-webkit-overflow-scrolling: touch 不是开关而是滚动资格申请，仅当html和body设height:100%且body overflow:hidden、滚动容器为body直接子元素、其自身设height:100vh、同时声明overflow-y:scroll和该属性时才启用硬件加速惯性滚动。
-webkit-overflow-scrolling: touch 不是给 body 加了就能生效的“开关”，它只在满足四条硬性条件时才真正启用硬件加速惯性滚动。直接写 body { -webkit-overflow-scrolling: touch; }，90% 情况下完全无效。
为什么 body 直接加 -webkit-overflow-scrolling: touch 没用
因为 WebKit 不把 body 当作独立滚动容器处理——根滚动由 html 元素承载，body 只是内容流；而 -webkit-overflow-scrolling 只作用于明确声明了 overflow-y: scroll（或 auto）且具备“可滚动资格”的**子容器**。
-
body默认没有显式height，也没有overflow声明，系统判定“无需滚动”，直接忽略该属性 - 即使强行加
overflow-y: scroll，若父级（如html）未设height: 100%或存在transform等合成层变更属性，滚动上下文断裂 - iOS Safari 的弹性滚动（rubber-band）会绕过
body的 CSS 限制，手指一划照样拖拽回弹
真正生效的滚动容器必须满足这 4 个条件
只有同时达成以下全部，-webkit-overflow-scrolling: touch 才触发原生惯性滚动：
-
html和body都设height: 100%，且body设overflow: hidden（切断根滚动通路） - 实际滚动区域（如
.scroll-container）必须是body的**直接子元素**，不能嵌套在div或section里 - 该容器自身设
height: 100vh（不能用flex: 1、min-height或靠内容撑开） - CSS 中必须同时声明：
overflow-y: scroll+-webkit-overflow-scrolling: touch
scroll 事件拿不到实时 scrollTop 怎么办
启用后，scrollTop 在滚动过程中始终冻结，scroll 事件仅在结束时触发一次——这是 WebKit 原生滚动管线的设计，不是 bug。
- 需要实时位置？优先用
scrollend事件（iOS 16.4+），或监听touchmove的e.touches[0].clientY位移（注意：必须配{ passive: true }，否则警告并降频） - 兼容旧 iOS？可用
requestAnimationFrame+getBoundingClientRect()估算，但精度有限，且无法还原惯性衰减曲线 - 别在
scroll回调里做 DOM 操作或重排，高频触发 + 冻结值会导致逻辑错乱
fixed 元素抖动和 body 宽度跳变连带问题
一旦启用上述方案，body { overflow: hidden } 会让滚动条消失，body 宽度突增约 15px，所有 position: fixed 元素视觉左偏。
- iOS 15+ 可用：
body { padding-right: calc(100vw - 100%) }，让滚动条始终占位 - 老版本 Safari 需 JS 检测：
if ('ontouchstart' in window) { document.body.style.paddingRight = '15px'; } - 更关键的是：不要只锁
body，弹窗等场景必须同步操作html的position: fixed+top: -${scrollTop}px，否则固定定位仍会随底层滚动偏移
真正难的不是写那行 CSS，而是让整个滚动上下文对齐 WebKit 的硬件加速准入规则——任何一环断裂，惯性就退化成 JS 模拟滚动，卡顿、无回弹、事件失准全跟着来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
