视差滚动本质是CSS transform+滚动监听，并非HTML5新特性；需用requestAnimationFrame节流、transform替代top/margin、移动端加passive:true，配置应存为parallaxConfig对象并封装成独立模块。
视差滚动本质是 CSS transform + 滚动监听，不是 HTML5 新特性
很多人误以为“HTML5 可视化编辑”里有现成的 parallax 标签或 API，其实没有。视差滚动靠的是对 window.scrollY（或 element.scrollTop）的实时读取，结合 transform: translateY() 或 background-position 做位移差值。所谓“可视化编辑”，只是在拖拽/配置界面里自动生成这类 CSS 和 JS 逻辑。
用 requestAnimationFrame 实现平滑视差，别用 scroll 事件直接驱动
直接在 scroll 事件里改样式会导致掉帧、卡顿，尤其在移动端。必须用 requestAnimationFrame 节流 + 缓存滚动值：
let lastScrollY = window.scrollY;
window.addEventListener('scroll', () => {
lastScrollY = window.scrollY;
});
function updateParallax() {
const speed = 0.3;
const layer = document.querySelector('.parallax-layer');
layer.style.transform = `translateY(${(lastScrollY * speed) * -1}px)`;
requestAnimationFrame(updateParallax);
}
updateParallax();
-
speed小于 1 表示慢于滚动（背景层），大于 1 表示快于滚动（前景浮动） - 务必用
transform而非top或margin-top，否则触发重排 - 移动端需加
{ passive: true }到 scroll 监听器，避免阻塞默认滚动
可视化编辑器里怎么存视差配置
如果做低代码平台，每个可拖拽图层应带一个 parallaxConfig 对象，而不是硬写 CSS：
{
"layerId": "bg-1",
"speed": 0.25,
"axis": "y",
"type": "transform" // 或 "background"
}
-
type: "background"时，生成的是background-position: 50% calc(50% + ${offset}px) - 多个图层要按 DOM 顺序或
z-index分层渲染，否则遮挡关系错乱 - 导出 HTML 时，把配置转成内联
style+ 初始化脚本，别依赖外部 CSS 类名——否则可视化编辑时改了类名就断了
iOS Safari 和 Chrome Android 的视差兼容陷阱
这两个环境对 transform 在 position: fixed 元素上的表现不一致，且 background-attachment: fixed 在 iOS 上基本失效：
立即学习“前端免费学习笔记（深入）”；
- 放弃
background-attachment: fixed，全量走 JS +transform - iOS Safari 中，
will-change: transform必须加在视差元素上，否则动画撕裂 - 某些安卓 WebView 不支持
requestAnimationFrame在后台标签页唤醒，切页后需手动重置lastScrollY - 不要用
vh单位做视差容器高度——Safari 地址栏收放会触发 resize，导致视口高度跳变
真正麻烦的不是怎么写效果，而是怎么让同一套配置在七八种 WebView 里不闪、不卡、不偏移。建议把视差逻辑封装成独立模块，暴露 init()、destroy() 和 updateConfig() 三个方法，方便运行时热替换参数。
