结论：别加 -webkit-overflow-scrolling: touch，它在 ios 13+ 已失效；真正影响流畅度的是合成层缺失、重排重绘和滚动链穿透，不是缺一个 css hack。
直接说结论：别加 -webkit-overflow-scrolling: touch，它在 iOS 13+ 已失效；真正影响流畅度的是合成层缺失、重排重绘和滚动链穿透，不是缺一个 CSS hack。
为什么加了 -webkit-overflow-scrolling: touch 反而更卡
这个属性早在 iOS 8 就被标记为废弃，iOS 13+ 完全不生效。现代 WebKit（包括 Safari 16+）默认启用原生惯性滚动，强行加上反而会：
- 干扰浏览器对滚动容器的合成层自动管理，导致图层错位或重绘异常
- 让
position: fixed元素在滚动中偏移或闪烁 - 破坏下拉刷新控件的触点判定逻辑
- 在某些 Hybrid WebView（如微信内置浏览器）里触发渲染回退，变成软件渲染
如果你还在老项目里看到它，只可能是因为目标环境卡在 iOS 9 以下——否则，删掉它就是第一步优化。
overscroll-behavior: contain 解决什么，不解决什么
它只管「滚到头停不停」，不管「滚得顺不顺」。
加了 overscroll-behavior: contain 后弹窗不穿透了，但手指一松就戛然而止？这不是它的问题，是惯性滚动没激活。常见误用场景：
- 只写
overscroll-behavior: contain，却没确保容器有明确高度（height或max-height），导致滚动上下文根本没建立 - 在 Flex 布局父容器上漏设
min-height: 0，子元素overflow-y: auto失效 - 用
100vh设高，但 iOS 地址栏收起时视口变化，容器高度塌缩，overscroll-behavior失去作用对象 → 改用100dvh（iOS 16.4+）或 JS fallback
真正起效的硬件加速策略：什么时候加 will-change，什么时候别加
will-change: transform 不是开关，是预约单——只对「正在被 touchmove 实时驱动位移」的元素有效，且必须动态设置、及时清除。
错误做法：
- 静态写在 CSS 里，比如
.list-item { will-change: transform; }→ 一屏 20 个 item 就建 20 个 GPU 图层，中低端机直接掉帧 - 加在父容器（如
.list-wrapper）上，但实际位移的是子元素 → 信号发错对象，图层空转耗资源 - 元素带
border-radius+overflow: hidden→ 强制回退软件渲染，will-change彻底失效
正确做法：
- 在
touchstart阶段给当前拖拽元素设element.style.willChange = 'transform' - 动画结束（
transitionend或requestAnimationFrame）后两帧内设回'auto' - 优先用
transform: translateZ(0)替代 —— 更稳、无需 JS 管理生命周期、兼容性更好
滚动监听性能陷阱：别让 JS 拖垮帧率
CSS 本身不卡，但绑错 scroll 事件就卡。高频读取布局信息是最常见雷区：
- 直接在
scroll回调里调用getBoundingClientRect()或读offsetTop→ 强制同步回流，帧率暴跌 - 没加
{ passive: true }→ 浏览器因等待 JS 执行而延迟滚动响应，手感发“粘” - 用
scroll做吸顶或懒加载 → 推荐换IntersectionObserver，它由浏览器异步调度，不触发重排
必须监听时，用 requestAnimationFrame 节流：
let rafId = 0;
el.addEventListener('scroll', () => {
cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(() => {
// 这里读 scrollTop / getBoundingClientRect
});
});
复杂点在于：滚动优化不是堆 CSS 属性，而是理解每一行代码触发的渲染流水线阶段——合成层是否创建、是否强制回流、是否阻塞主线程。最容易被忽略的，其实是容器尺寸声明和 touch-action 的配合。没有明确高度，overscroll-behavior 就是摆设；没设 touch-action: pan-y，iOS 上 touchmove 就会延迟 300ms 判定，再丝滑的 transform 也救不回第一帧的手感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
