移动端 overflow-y: scroll 无惯性滚动是因为 iOS Safari 仅对 body 或根容器启用原生惯性，普通元素需加 -webkit-overflow-scrolling: touch（iOS 必需，Android 无效）并设置明确高度才生效。
移动端 overflow-y: scroll 为什么没惯性滚动
因为 iOS Safari（以及部分 Android WebView）默认只对 或根容器启用原生惯性滚动，普通元素加了 overflow-y: scroll 后只是“可滚动”，但不触发系统级滑动动能。你拖完就停，像卡住一样。
- 必须同时设置
-webkit-overflow-scrolling: touch（仅 WebKit 内核有效） - 该属性已废弃但仍是目前最可靠方案；iOS 16+ 虽支持部分新行为，但不加它，惯性基本失效
- 仅作用于设置了
overflow且有明确高度（height或max-height）的元素 - 若父容器
overflow为hidden或未设尺寸，子元素即使加了也无效
-webkit-overflow-scrolling: touch 的兼容性陷阱
这属性在 Chrome 98+ 和新版 Edge 已被移除，但在 iOS Safari（包括 iOS 17）仍必需；Android Chrome 则完全忽略它，靠其他方式模拟惯性。
- iOS 必须加，否则滚动生硬、无回弹、无法滑过边界
- Android 端加了无害但无效，得靠
overscroll-behavior: contain配合事件优化 - 加了之后可能引发渲染层提升（layer promotion），导致内存占用略升，长列表慎用在非必要区域
- 如果元素内含
position: fixed子元素，可能出现定位错乱——这是 WebKit 经典 bug，建议改用position: sticky替代
滚动容器高度设置不当直接导致失效
常见现象是加了 overflow-y: scroll 和 -webkit-overflow-scrolling: touch，但依然不能滚，或者只滚一帧就停。
- 必须显式设置
height或max-height，百分比高度需确保父容器有确定高度（比如html, body { height: 100% }） - 用
vh单位时注意：iOS Safari 中100vh在地址栏收起/展开时会跳变，建议用100dvh（iOS 16.4+ 支持）或 JS 动态计算 - Flex 容器中子项设
overflow，需父项加min-height: 0防止 flex 基线干扰高度计算 - 不要依赖
content-visibility: auto包裹滚动区——它会中断滚动上下文，导致惯性丢失
替代方案：不用 -webkit-overflow-scrolling 怎么办
当项目要求现代标准兼容（比如弃用 WebKit 私有属性），或需要更可控的滚动行为时，scroll() / scrollTo() + touchmove 手动实现是唯一出路，但代价明显。
- 原生
scrollTo({ behavior: 'smooth' })在 iOS 上不触发惯性，仅做缓动，不是物理滚动 - 第三方库如
smooth-scrollbar或locomotive-scroll本质是接管 touch 事件 + requestAnimationFrame 模拟，功耗高、手势延迟明显 - 真正轻量的解法是监听
touchstart/touchmove/touchend，记录速度，在touchend后用requestAnimationFrame持续衰减位移——但要处理边界回弹、阻尼系数、多点触控冲突 - 除非有定制化需求（比如滚动吸附、视差联动），否则别轻易放弃
-webkit-overflow-scrolling: touch；它的“过时”恰恰是当前最稳的落地方案
真正卡顿往往不在滚动本身，而在滚动区域内的重绘——比如每帧都读取 offsetTop、频繁触发 layout，或者图片未懒加载。惯性滚动只是表象，背后是渲染管线是否被阻塞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
