滚动时如何实现平滑的视差动画效果？

❤瑞娜提问于 2026-03-05 19:27:20 阅读 2

交互

我在用 React 做一个带视差滚动的页面，想让背景图滚动得比内容慢一点，但试了几次都不流畅，甚至有时候卡顿。是不是我的写法有问题？

我用了 useEffect 监听 scroll 事件，然后直接改 style，但感觉性能很差：

useEffect(() => {
  const handleScroll = () => {
    const offset = window.scrollY;
    document.querySelector('.parallax-bg').style.transform = <code>translateY(${offset * 0.5}px)</code>;
  };
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

滚动动画滚动效果

我来解答赞 1 收藏

反馈

1 条解答

潇郡 Lv1

你这写法确实会卡，scroll事件触发太频繁了。试试用requestAnimationFrame优化下，再配合transform和will-change提升性能：

useEffect(() => {

  let ticking = false;

  const bg = document.querySelector('.parallax-bg');

  

  const handleScroll = () => {

    if (!ticking) {

      window.requestAnimationFrame(() => {

        const offset = window.scrollY;

        bg.style.transform = translateY(${offset * 0.5}px);

        ticking = false;

      });

      ticking = true;

    }

  };

  

  bg.style.willChange = 'transform';

  window.addEventListener('scroll', handleScroll);

  return () => window.removeEventListener('scroll', handleScroll);

}, []);

关键点：
1. 用requestAnimationFrame节流，比debounce更顺滑
2. will-change告诉浏览器这个元素会变，提前优化
3. transform不会触发重排，性能比top/left好

要是还卡，可能是图片太大，可以试试压缩下背景图。我之前做这个被产品经理的4K大图坑过...

2026-03-05 20:12