为什么我的Parallax视差滚动效果在移动端显示不流畅？

芸倩🍀 提问于 2026-01-28 08:18:24 阅读 55

组件

我在用CSS transform和JavaScript监听scroll事件做视差效果，PC端滑动挺顺的，但手机滑动就明显卡顿。尝试过把图片用position: fixed，然后用窗口滚动距离的百分比计算位移，代码大概是这样的：


window.addEventListener('scroll', () => {
  const offset = window.scrollY * 0.5;
  parallaxEl.style.transform = `translateY(${offset}px)`;
});

控制台没报错，但用手机测试时fps经常掉到20多。试过把calc()写到CSS里，或者改用translate3d也没改善。是不是事件监听太频繁了？或者移动端处理transform性能差很多？

我来解答赞 9 收藏

反馈

2 条解答

书生シ世玉 Lv1

移动端的视差滚动效果卡顿，问题确实出在 scroll 事件的频繁触发上。这个事件在手机上触发频率比 PC 高很多，加上你在里面直接操作 DOM 和 transform，很容易导致性能瓶颈。

你猜得没错，**监听太频繁了**，而且每次 scroll 都触发 layout（比如 window.scrollY），会造成强制同步布局，拖累帧率。

### 建议改成下面几个优化点：

#### 1. 使用 requestAnimationFrame 节流
避免在 scroll 中直接操作样式，而是用 rAF 控制重绘节奏：

let ticking = false;



window.addEventListener('scroll', () => {

  if (!ticking) {

    requestAnimationFrame(() => {

      const offset = window.scrollY * 0.5;

      parallaxEl.style.transform = translateY(${offset}px);

      ticking = false;

    });

    ticking = true;

  }

});

#### 2. 把 window.scrollY 换成 scrollY（更轻量）
虽然差别不大，但 scrollY 是只读的，比调用 window.scrollY 稍微快一点。

#### 3. 启用硬件加速
虽然你试了 translate3d，但可能没加 will-change 或者没用 opacity 激活图层：

.parallax-el {

  will-change: transform;

  transform: translateZ(0);

}

#### 4. 用 CSS position: sticky 替代 fixed
移动端对 fixed 的处理比较复杂，容易重排，sticky 在某些场景下更稳定，可以试试。

#### 5. 考虑用 Scroll-driven Animation API
如果你不考虑兼容性，现在 Chrome 等浏览器已经支持使用 CSS 和 @scroll-timeline 实现视差动画了，完全脱离 JS，性能更好，但目前兼容性不好。

### 总结
优先级：先节流 scroll 事件，再减少 layout 重排。用上面的 rAF 节流方法 + will-change 应该就能解决大部分卡顿问题。

移动端 CPU 就那样，能少操作就少操作。别太狠。

2026-02-03 12:07

程序猿文鑫 Lv1

移动端卡顿的问题确实挺常见的，尤其是用 scroll 事件做视差效果的时候。问题的核心其实不是 transform 性能差，而是 scroll 事件在移动端触发频率太高，直接操作 DOM 会导致重绘和回流，性能自然就崩了。

解决办法有这么几个：

1. **节流**：先给 scroll 事件加个节流，别让它疯狂触发。你可以用个简单的时间戳方法：

let lastScroll = 0;

   window.addEventListener('scroll', () => {

       const now = Date.now();

       if (now - lastScroll > 16) { // 大概每秒60帧

           lastScroll = now;

           const offset = window.scrollY * 0.5;

           parallaxEl.style.transform = translateY(${offset}px);

       }

   });

2. **requestAnimationFrame**：把 DOM 操作放到动画帧里，让浏览器自己优化绘制时机：

let rafId;

   window.addEventListener('scroll', () => {

       if (rafId) return;

       rafId = requestAnimationFrame(() => {

           const offset = window.scrollY * 0.5;

           parallaxEl.style.transform = translateY(${offset}px);

           rafId = null;

       });

   });

3. **GPU加速**：虽然你已经用了 transform，但可以再确保下是否真正交给了GPU。试试加上 will-change: transform; 提前告诉浏览器这个元素会变：

.parallax-element {

       will-change: transform;

   }

如果还是卡，那可能就是图片太大或者设备性能太烂了。试着压缩下图片尺寸，或者降低视差的移动比例（比如从 0.5 改成 0.3）。实在不行，移动端干脆关掉视差效果也行，用户体验比炫技更重要嘛。

2026-01-29 22:03