CSS如何使得在触屏设备上滚动更流畅

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() 拦截，但会影响正常滚动，慎用