scroll-behavior: smooth 对背景图无效，因其仅控制容器滚动动画，不驱动背景图位移；真正平滑需作用于可滚动容器、避免 background-attachment: fixed，并优先用 transform 实现帧级平滑。
scroll-behavior: smooth 为什么对背景图滚动没用
直接给 html 或 body 设置 scroll-behavior: smooth，只能让页面整体滚动变平滑，但**背景图本身不会动**——它只是附着在某个元素上的一张静态贴图。所谓“背景图滚动”，本质是容器滚动时，背景位置随视口变化产生位移感。想让它“平滑”，关键不在背景图，而在触发它的那个滚动行为是否平滑。
真正起作用的滚动目标必须是可滚动容器
如果希望背景图随滚动“平滑移动”，得确保：滚动事件发生在设置了 scroll-behavior: smooth 的**可 overflow 滚动容器**上，而不是整个页面。常见错误是只设了 body，但实际内容被包裹在 div 里且该 div 才是真实滚动体。
- 检查实际滚动的是哪个元素：用浏览器开发者工具高亮滚动区域，看
overflow-y: auto/scroll落在哪一层 - 对该元素（比如
.scroll-container）显式设置scroll-behavior: smooth - 确保该元素有明确高度和
overflow: auto，否则无法触发局部滚动 - 不要依赖
body的scroll-behavior来控制内部容器的滚动动画
background-attachment: fixed 会破坏 scroll-behavior 平滑性
当使用 background-attachment: fixed 时，背景图绑定到视口而非元素，此时即使容器滚动平滑，背景图的渲染可能因浏览器合成策略出现卡顿或跳变——尤其在 Safari 和部分移动端 WebView 中。
- 优先改用
background-attachment: scroll+background-position动态计算（如配合position: sticky或 JS 监听scroll） - 若必须用
fixed，需接受其与scroll-behavior兼容性差的事实；Chrome 115+ 支持较好，但 iOS Safari 仍可能忽略平滑过渡 - 测试时打开“Rendering”面板，观察是否频繁触发
Composite Layers切换，这是卡顿信号
需要真平滑背景位移？CSS 自己动不了，得靠 transform
scroll-behavior 控制的是滚动动作本身，不是背景图的运动轨迹。如果目标是让背景图随滚动“匀速滑过”（比如视差效果），纯 CSS 无法实现真正的帧级平滑插值——它只能靠浏览器对 background-position 的硬件加速支持，而这个支持很有限。
- 可靠方案：监听
scroll事件，用requestAnimationFrame更新transform: translateY()作用于伪元素或子层 - 避免直接改
background-position，尤其在大量滚动中，容易触发重排重绘 - 示例结构：
<div class="parallax-container"> <div class="parallax-bg" aria-hidden="true"></div> <div class="content">...</div> </div>
，然后对.parallax-bg做transform动画
scroll-behavior 是开关，不是动画引擎；背景图的“平滑”，最终取决于你让它动的方式，而不是你怎么滚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
