最简视差用 CSS background-attachment: fixed 实现，需为区块设明确高度（如 100vh）、避免 transform 和 overflow: hidden，移动端加 -webkit- 前缀；进阶可控视差用 scroll + requestAnimationFrame 节流；轻量触发用 IntersectionObserver；3D 方案易翻车，个人页无需使用。
用 CSS background-attachment: fixed 实现最简视差
这是兼容性最好、零 JS、一行 CSS 就能生效的方案，适合静态个人页。核心是让背景图“钉”在视口不动，而内容层正常滚动，形成相对位移错觉。
常见错误：直接给 或整页容器加 fixed，结果背景被裁切或失效——必须确保该元素有明确高度且不被父容器 overflow: hidden 截断。
- 给需要视差效果的区块（如
）设固定高（例如height: 100vh） - CSS 中写：
background-attachment: fixed，同时配background-size: cover和background-position: center - 避免在该区块内使用
transform（如scale()、translateZ()），会强制创建局部层叠上下文，使fixed失效 - 移动端 Safari 默认禁用
fixed背景滚动，需加-webkit-background-attachment: fixed并测试真机
用 scroll 事件 + transform: translateY() 做可控视差
当你要控制不同图层滚动速度（比如前景动得快、背景动得慢），或者需要响应式微调时，就得用 JS 监听滚动并动态改 transform。比纯 CSS 灵活，但要防性能坑。
关键不是“怎么算偏移”，而是“怎么不让它卡”。直接在 scroll 里改样式等于每帧都触发重排重绘。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流：只在下一帧渲染前更新位置，不是每次滚动都算 - 把要动的元素设为
will-change: transform（仅对频繁动画的元素），或确保其已提升为合成层（例如加transform: translateZ(0)） - 计算偏移量用
window.scrollY * 0.5这类系数即可，别用getBoundingClientRect()频繁查位置 - 示例结构：
，JS 读dataset.speed控制倍率
用 IntersectionObserver 替代 scroll 监听做轻量视差
如果你的视差只在某个区块进入/离开视口时触发（比如只在“关于我”区域显示浮动头像），完全不用监听全局滚动——IntersectionObserver 更精准、更省资源。
它不关心滚动多快，只告诉你“这个元素现在可见比例是多少”，天然适合做淡入、位移、缩放等交互动画。
- 初始化时传
{ threshold: [0, 0.25, 0.5, 0.75, 1] }，可拿到不同进入阶段的回调 - 在
callback里根据entry.intersectionRatio算translateY值，比如element.style.transform = `translateY(${(1 - ratio) * 40}px)` - 不支持 IE，但 Chrome/Firefox/Safari（iOS 12.2+）全支持，个人页基本无兼容压力
- 比
scroll方案内存占用低，页面滚动再猛也不影响它
为什么 perspective + transform-style: preserve-3d 很少真用
网上有些教程教用 3D 变换模拟景深视差，听着高级，实际在个人页中几乎没优势，还容易翻车。
问题不在代码难写，而在行为不可控：轻微滚动就导致背景剧烈偏移、文字模糊、iOS 上闪屏、缩放页面后错位……除非你做的是 WebGL 级别的交互页，否则没必要。
-
perspective值极敏感，设成1000px和2000px效果差异巨大，调试成本高 - 所有子元素必须设
transform-style: preserve-3d，一旦漏一个，整个 3D 层叠就塌掉 - 和
position: sticky、backdrop-filter等现代属性存在已知冲突，尤其在 Safari - 真正需要 3D 视差的场景极少，比如产品页展示立体模型；个人页用好
fixed或scroll + rAF就够了
视差本身不难，难的是选对层级和时机——背景图要不要随缩放重载？是否允许用户禁用动画？这些细节比实现方式更容易被忽略。
