删掉 -webkit-overflow-scrolling: touch 反而更顺，因其在 chrome 63+ 和 safari 15.4+ 中已被废弃，强制降级旧滚动引擎：ios 失去惯性滚动，android 导致 touchmove 同步阻塞主线程，帧率跌破 20fps。
删掉 -webkit-overflow-scrolling: touch，它在现代 iOS 和 Android 上已成性能毒药，不是“加了更流畅”，而是“加了必卡顿”。
为什么删掉 -webkit-overflow-scrolling: touch 反而更顺
这个属性在 Chrome 63+ 和 Safari 15.4+ 中已被废弃，但很多项目仍从旧模板或 UI 库中继承下来。它不会启用硬件加速，只会强制浏览器降级到旧滚动引擎：iOS 上惯性滚动丢失、Android 上 touchmove 同步阻塞主线程，滚动帧率直接掉到 20fps 以下。
- 用 Chrome DevTools → Elements 面板全局搜索
-webkit-overflow-scrolling，只要存在就删 - 检查 JS 是否动态注入（比如某些 Bootstrap 封装组件在
init()时偷偷加上） - 别信“模拟器不生效所以真机要加”——真机上加了才真正出问题
overflow-y: scroll 容器没滚动条？先查三层约束
滚动区域不生效，90% 是因为容器被多层样式静默截断。必须逐层确认：
- 父容器是否设了
height或max-height？没设则overflow-y无效 - 容器自身是否用了
transform、opacity或filter？WebKit 会无序升层，打断滚动线程 - 是否写了
overflow-y: scroll而非overflow-y: auto？iOS Safari 会对未溢出内容也强占合成层资源，浪费显存
正确写法：.scroll-container { max-height: 60vh; overflow-y: auto; }
will-change: transform 别乱加，尤其别加给列表项
给每个 .item 加 will-change: transform 是移动端卡顿高频翻车点。一屏渲染 15 个列表项，等于同时喂给 GPU 15 个图层——中低端安卓机显存吃紧，帧率崩塌。
- 只对真实承载位移的容器设，例如
.scroll-content，且该元素必须有真实transform: translateY()或translateZ(0) - 绝对禁止写
.item { will-change: transform; }这类全局规则 - 用 Chrome DevTools → Layers 面板看图层数：稳定在 3～5 层为佳，超过 8 层立刻排查
滚动监听器不加 { passive: true } 就等于放弃 60fps
哪怕只写了一行 window.addEventListener('scroll', handler)，iOS 上滚动帧率也可能从 60fps 掉到 20fps。因为默认 passive 是 false，浏览器必须等 JS 执行完才能继续滚动。
- 所有滚动监听必须显式传
{ passive: true }，否则 Chrome/Safari 都会警告并降级 - 需要阻止默认行为（如下拉刷新）？改用
touchstart+preventDefault()，别在scroll回调里调 - 避免在
scroll回调里读取scrollTop、getBoundingClientRect()或写element.style.xxx——这会强制同步回流（layout thrashing）
真正卡顿的根源往往不在渲染层，而在主线程被拖住或布局计算失控；优化滚动，本质是让浏览器敢放手去滚，而不是等你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
