touch-action: manipulation 不推荐直接加在 body 上，会禁用双指缩放和长按选中文本；应仅用于明确滚动容器如 .scroll-container，并避免在含交互元素的父容器上使用 pan-y 或 pan-x。
touch-action: manipulation 能不能直接加在 body 上
能，但不推荐——它会禁用双指缩放和长按选中文本，对可访问性不友好。更稳妥的做法是只作用于明确需要滚动优化的容器，比如 .scroll-container。
常见错误现象：touch-action: none 一加就卡死，或页面突然不能缩放、无法复制文字；touch-action: pan-y 加在 body 上反而让顶部导航栏滑动失灵。
- 只对「纯滚动区域」设
touch-action: pan-y（纵向滚动）或pan-x（横向） - 避免在含表单、按钮、可点击卡片的父容器上设
pan-y，否则可能拦截click事件 - 如果容器内有横向滚动区（如轮播图），改用
touch-action: pan-y pinch-zoom，保留缩放能力
will-change: transform 有没有副作用
有，而且很实在：强制创建合成层，吃内存；在低端安卓机上甚至导致文字渲染模糊或闪烁。
使用场景非常有限——仅当滚动时存在频繁重排（reflow）且已确认是性能瓶颈时才考虑。大多数情况下，overflow-scrolling: touch（iOS）或 scroll-behavior: smooth 配合硬件加速 CSS 属性更安全。
立即学习“前端免费学习笔记（深入）”；
- 别对整个
body或html设will-change: transform - 只临时加在滚动中真正“动起来”的元素上，滚动结束立刻移除（可用
scroll事件监听 +requestAnimationFrame控制） - 优先用
transform: translateZ(0)替代will-change，兼容性更好，副作用更小
滚动卡顿是不是因为 JavaScript 监听了 scroll 事件
极大概率是。默认情况下，scroll 事件在主线程同步触发，只要回调里有计算、DOM 读写或重排，就会拖慢滚动帧率。
典型错误：在 scroll 里反复读取 element.offsetTop、调用 getBoundingClientRect()，或直接修改样式。
- 用
passive: true选项注册事件：element.addEventListener('scroll', handler, { passive: true })，让浏览器知道你不会调用preventDefault() - 把 DOM 读取逻辑移到
requestIdleCallback或节流后执行，滚动中只做标记（如isScrolled = true） - 真要响应滚动位置变化，优先用
IntersectionObserver替代scroll事件监听可见性
iOS Safari 滚动回弹太猛怎么压住
不是 JS 能控的，得靠 CSS 的 -webkit-overflow-scrolling 和 overscroll-behavior 组合。
注意：iOS 16+ 已废弃 -webkit-overflow-scrolling: touch，但去掉后老项目容易变卡；而 overscroll-behavior: contain 可以有效抑制下拉刷新和滚动穿透，但只在局部滚动容器生效。
- 对局部滚动区（如弹窗内的列表）设
overscroll-behavior: contain - 保持
-webkit-overflow-scrolling: touch在 iOS 15 及以下设备仍有效，可用媒体查询渐进增强 - 禁止下拉刷新？没标准方案。只能用
touchstart+preventDefault()拦截，但会影响正常滚动，慎用
