-webkit-overflow-scrolling: touch 不是开关而是滚动资格申请，仅当容器满足四硬性条件（body设height:100vh且overflow:hidden、滚动容器为body直接子元素、有明确height:100vh、同时声明overflow-y:scroll和该属性）时才启用硬件加速惯性滚动。

-webkit-overflow-scrolling: touch 不是“开关”，而是向 WebKit 提交的一份滚动资格申请——它只在满足条件时才生效。直接给任意元素加这行 CSS，90% 情况下不会起作用。

为什么加了 -webkit-overflow-scrolling: touch 还不惯性滚动

常见失效原因不是属性写错，而是容器被系统判定“不具备原生滚动资格”：

• overflow: hidden 父级（比如 body 或外层 wrapper）直接封死滚动通路
• 滚动容器没设显式 height 或 max-height，WebKit 认为“无需滚动”，直接忽略该属性
• 容器或其祖先用了 transform、filter、will-change 等触发合成层变更的属性，导致滚动上下文断裂
• @touchmove 中无条件调用 e.preventDefault()，等于主动放弃系统滚动引擎，后续只能 JS 模拟，必然卡顿且无惯性

必须同时满足的 4 个硬性条件

只有全部达成，-webkit-overflow-scrolling: touch 才真正启用硬件加速惯性滚动：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• body 必须设 height: 100vh 且 overflow: hidden（切断 body 滚动，避免 fixed 元素抖动）
• 实际滚动容器（如 .scroll-container）必须是 body 的**直接子元素**
• 该容器需有明确 height: 100vh（不能靠 flex: 1 或内容撑开）
• CSS 中必须同时声明：overflow-y: scroll + -webkit-overflow-scrolling: touch

scroll 事件监听不到实时滚动位置怎么办

启用 -webkit-overflow-scrolling: touch 后，scrollTop 在滚动过程中**始终不变**，只在结束时更新一次。这不是 bug，是 WebKit 原生滚动管线的设计特性：

• 不要依赖 scroll 事件读取实时位置，它已退化为“滚动结束通知”
• 需要实时位置？改用 scrollend（iOS 16.4+）或监听 touchmove 手势位移（注意：必须设 passive: true，否则会触发警告并降频）
• 若必须兼容旧 iOS，可结合 requestAnimationFrame + getBoundingClientRect() 估算，但精度有限

fixed 元素抖动和 body 宽度跳变怎么连带解决

很多所谓“惯性滚动失效”，其实是 body 被锁滚动后引发的连锁反应：

• 弹窗打开时 body { overflow: hidden } → 滚动条消失 → body 宽度突增约 15px → fixed 元素视觉左抽
• 解决方案：用 body { padding-right: calc(100vw - 100%) } 让滚动条始终占位（iOS 15+ 支持）；老版本 Safari 需 JS 检测后写死 paddingRight
• 所有 position: fixed 元素（导航栏、按钮）仍放在 body 下，但滚动行为完全由 .scroll-container 承担，它们就真正“固定”在视口上了

真正起作用的从来不是那一行 CSS，而是整个滚动容器是否被 WebKit 认定为“可信任”。任何一处条件不满足，它就退回软件渲染，惯性、回弹、甚至基本流畅度都会消失——这点在真机上验证比模拟器可靠得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！