background-attachment: fixed 在桌面 Chrome/Firefox 上可用，但在 iOS Safari 和多数安卓 WebView 中被主动禁用，即使加前缀或硬件加速也无效；移动端应改用 scroll + transform 方案，需配合 passive: true、requestAnimationFrame 节流及 will-change: transform 升层。
background-attachment: fixed 能用吗？先看设备
能，但只在桌面 Chrome/Firefox 上稳定；iOS Safari 和多数安卓 WebView 会直接忽略它，哪怕加了 -webkit-background-attachment: fixed 或 transform: translateZ(0)。这不是你写错了，是 WebKit 主动禁用——真机上背景完全不动，属于平台限制，不是 bug。
新手如果只想快速上线、不强求移动端动效，可以用这个方案，但必须满足三个条件：
-
height或min-height必须显式设置（如min-height: 100vh），height: auto下直接退化为普通滚动 - 不能嵌套在
position: sticky、transform或overflow: hidden的父容器里，否则层叠上下文崩塌，背景被裁切 - 背景图建议用
background-size: cover+background-position: center，避免拉伸或偏移错位
scroll + transform 怎么写才不卡
这是真正跨端可用的方案，但新手常因两件事卡顿：直接在 scroll 回调里改样式，以及没加 passive: true。
正确写法分三步：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听时加配置：
window.addEventListener('scroll', handleScroll, { passive: true })—— 不加这个，iOS/安卓会强制同步执行，滚动立刻卡死 - 偏移计算用
window.scrollY * speed就够，别频繁调getBoundingClientRect()；speed设为0.2（远）到0.8（近），存进data-speed - 更新必须包在
requestAnimationFrame里，例如：requestAnimationFrame(() => el.style.transform = `translateY(${offset}px)`)
另外，每个要动的元素得提前升层：will-change: transform 或 transform: translateZ(0)，否则首帧易撕裂。
为什么 getBoundingClientRect() 报 “Cannot read property 'top' of null”
这不是视差逻辑问题，是 DOM 获取失败的典型报错。常见于 JS 执行太早 —— 比如脚本放在 <head> 里，而目标元素还没渲染出来。
解决方法很直接：
- 确保用
document.querySelector('.parallax-bg')后加判空：if (!el) return - 把初始化逻辑挪到
DOMContentLoaded事件里，或更稳妥地用IntersectionObserver触发 —— 元素进入视口再启动，既防错又省性能 - 避免在动态插入的 DOM 上直接操作：Ajax 加载后，记得手动设
el.style.willChange = 'transform'
移动端视差失效的三个硬伤点
iOS Safari 对视差的限制是系统级的，绕不开，只能换策略：
-
background-attachment: fixed在真机上基本无效，别测试、别加前缀、别挣扎，换 JS 方案 -
position: sticky和 JS 视差共存时，iOS 可能定位错乱甚至抖动，要么把 sticky 元素抽到滚动容器外，要么用IntersectionObserver模拟粘性行为 - 快速滚动时，若没节流或没升层，低端机容易闪屏、掉帧，核心解法就两个：
requestAnimationFrame+will-change: transform
新手最容易忽略的是：视差不是“动起来就行”，而是“动得稳、动得准、动得省”。尤其当页面有多个视差层时，每一层的 will-change 和 passive 都得单独确认，漏一个就可能整页卡住。
