实现滚动时背景图片在Div内从左到右移动的效果

你可以通过动态绑定背景位置样式，结合已有的scrollY状态来实现滚动时图片移动的动画效果，核心思路是让背景图片的移动速度与页面滚动速度产生差异，形成视差层次感。

步骤1：动态设置背景位置 #

在组件的JSX部分，将计算后的背景位置通过内联样式传递给目标div。利用scrollY值乘以一个缩放系数（通常取0.3~0.6），控制图片移动速度：

<div 
  className="moving-image"
  // 负数让图片反向移动（滚动向下时图片向上移，视差效果更明显）
  style={{ backgroundPositionY: `-${scrollY * 0.5}px` }}
>
  {/* 你的组件内容 */}
</div>

效果逻辑说明 #

• scrollY是页面滚动的垂直距离，乘以小于1的系数（比如0.5），让背景图片移动速度慢于页面滚动，产生自然的深度视差。
• 如果需要图片和滚动同方向移动，去掉负号即可；调整系数大小可以控制移动快慢，找到最适配的视觉效果。

步骤2：优化滚动性能（可选） #

由于scroll事件触发频率极高，直接更新状态可能导致组件频繁重渲染。可以用requestAnimationFrame节流，结合useCallback优化事件处理函数：

import { useState, useEffect, useCallback } from 'react';

const [scrollY, setScrollY] = useState(0);

const handleScroll = useCallback(() => {
  requestAnimationFrame(() => {
    setScrollY(window.scrollY);
  });
}, []);

useEffect(() => {
  handleScroll();
  window.addEventListener("scroll", handleScroll);
  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, [handleScroll]);

内容的提问来源于stack exchange，提问作者timo.js