-webkit-overflow-scrolling: touch 已被 iOS 15.4+/Safari 16+ 弃用，真正生效的是明确高度+will-change: scroll-position+passive事件三者协同；缺一不可。
-webkit-overflow-scrolling: touch 已失效，iOS 15.4+ 和 Safari 16+ 完全弃用该属性，强行保留反而引发 fixed 错位、滚动掉帧、下拉刷新失灵。真正起效的是容器合成层建立 + 滚动上下文激活 + 事件被动模式配合。
为什么-webkit-overflow-scrolling: touch现在不工作了
它不是“没生效”，而是被浏览器主动忽略或降级处理。新版本 WebKit 不再用它触发硬件加速，反而可能干扰渲染管线。常见误判点包括：
- 容器高度靠
height: auto或 flex 内容撑开，WebKit 无法确认可滚动范围 - 父级用了
position: fixed、transform或filter，导致滚动上下文被截断 - 监听了
touchmove但没传{ passive: true }，浏览器被迫同步阻塞滚动等待 JS 执行 - 子内容实际未溢出（
scrollHeight <= clientHeight），iOS 根本不激活惯性滚动上下文
必须配的 CSS 组合（iOS 15+ 稳定生效）
别再单独写 -webkit-overflow-scrolling。以下三者缺一不可：
- 滚动容器设明确高度：
height、max-height或100dvh（避免用100vh，地址栏展开时会跳变） - 确保父级有确定高度，例如：
html, body { height: 100% }；Flex 容器中需加min-height: 0 - 显式启用滚动提示：
will-change: scroll-position（iOS 15+ 支持良好，旧版无效，不滥用） - 移除所有干扰合成层的样式：尤其是
filter、opacity: 0.99、backdrop-filter、mask及其祖先元素
touchmove 和 scroll 事件必须带 { passive: true }
这是最常被跳过、效果却最立竿见影的一环。不设该选项，iOS Safari 会暂停滚动等待 JS 回调返回，直接造成手势延迟甚至冻结：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
el.addEventListener('touchmove', handler) - 正确写法：
el.addEventListener('touchmove', handler, { passive: true }) - 同理适用于
scroll事件：el.addEventListener('scroll', handler, { passive: true }) - 若需在特定条件下阻止默认行为（如拖拽排序），改用
{ passive: false }并仅在必要时调e.preventDefault()
滚动到底部上拉卡住？优先用 overscroll-behavior-y: contain
回弹结束瞬间上拉卡住 1–2 秒，本质是 overscroll 事件穿透到 body 触发页面级回弹，而你的容器没拦截。此时：
- 确保滚动容器本身设置了
overscroll-behavior-y: contain（不是none，contain允许内部滚动但阻断穿透） - 嵌套滚动时（如弹窗内列表），内外两层都得加，否则内层停住后事件继续冒泡到外层
-
overscroll-behavior对html和body根元素无效，必须作用于真实滚动容器（如.list-wrapper）
真正影响滚动惯性的，是 iOS 渲染管线是否为该容器创建了独立滚动层——这取决于高度确定性、合成层是否建立、以及事件链是否畅通。CSS 层面能做的，就是不挡路、不干扰、不隐藏溢出条件。任何试图“调节阻尼”的尝试，基本都落空。
