视频元素不必用 position: fixed，但可靠视差实现普遍依赖它；需配合 top: 0、宽高设置及父容器 100vh 高度，移动端需加 will-change: transform；scroll 事件应结合 requestAnimationFrame 节流计算位移；video 必须设 autoplay、muted、loop、playsinline 和 preload="auto"；禁用 transition 才能避免晃动；加载状态和移动端兼容性是最大难点。
视频元素必须用 position: fixed 吗？
不是必须，但绝大多数可靠实现都依赖它。视差滚动本质是让视频的滚动速度与页面不同步，而 position: fixed 能让元素脱离文档流、锚定视口，再配合 transform: translateY() 动态偏移，就能模拟出“慢速跟随”的错觉。用 position: absolute 或纯 margin-top 会受父容器和文档流干扰，容易跳变或失效。
关键点：
-
fixed元素需设置top: 0和明确的width/height，否则尺寸塌陷 - 必须给父容器（如
）设height: 100vh或更高，否则固定定位的视频会“悬空”在顶部不动 - 移动端 Safari 对
fixed+ 视频有兼容问题，需加will-change: transform强制硬件加速
如何用 scroll 事件驱动视频位移？
不能直接监听 window.onscroll 并频繁修改 style.transform——性能差且卡顿。正确做法是用 requestAnimationFrame 节流 + 获取当前滚动进度，再算出偏移量。
核心逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
document.documentElement.scrollTop或window.scrollY获取当前滚动位置 - 用
document.body.scrollHeight - window.innerHeight算出最大可滚动高度 - 滚动进度 =
scrollY / maxScrollHeight，范围是0 ~ 1 - 视频位移 =
-progress * offsetRange，例如offsetRange = 200表示最多上移 200px
let video = document.querySelector('video');
let offsetRange = 200;
function updateParallax() {
let scrollY = window.scrollY;
let maxScroll = document.body.scrollHeight - window.innerHeight;
let progress = Math.min(scrollY / maxScroll, 1);
let translateY = -progress * offsetRange;
video.style.transform = translateY(${translateY}px);
}
window.addEventListener('scroll', () => {
requestAnimationFrame(updateParallax);
});
video 标签本身需要哪些属性才能稳定工作？
原生 video 在视差场景下极易出问题：自动暂停、音轨干扰、加载失败、全屏按钮残留。必须显式控制。
必备属性清单：
-
autoplay：必需，否则首次进入不会播放 -
muted：必需，Chrome/Firefox/Safari 都要求静音才能自动播放 -
loop：推荐，避免滚动到头时视频黑屏中断视差感 -
playsinline：iOS 必须，防止跳转全屏 -
preload="auto"：提升首帧加载速度，减少空白期 - 移除
controls—— 用户拖动会破坏滚动同步，且 UI 与视差不协调
HTML 示例：
为什么视差视频在滚动停止后还“晃动”或“回弹”？
这是 CSS transform 动画未关闭过渡效果导致的。如果给 video 设置了类似 transition: transform 0.3s ease，浏览器会在每次 transform 更新后自动补间，造成滞后和回弹感。
解决方法只有一条：彻底禁用过渡：
- CSS 中显式写
transition: none或transition: transform 0s - 避免使用任何预设动画库（如 AOS、ScrollMagic）默认加的过渡类
- 检查 DevTools 的 Computed 样式，确认
transition-property没有意外继承自父级
更稳妥的做法是在 JS 中直接操作 style.cssText 覆盖所有过渡：
video.style.cssText += '; transition: none !important;';
视差视频最脆弱的环节不在滚动计算，而在视频加载状态和移动端行为差异。比如 iOS 上 autoplay 可能被系统策略延迟触发，导致 transform 更新时视频还没 ready；又或者某些安卓 WebView 对 fixed 定位的 video 渲染异常。这些没法靠 CSS 一行代码解决，得结合 video.readyState 监听和降级 fallback。
