求助：实现滚动时背景渐变为黑色的React效果

要实现滚动时背景逐渐变黑，直到.who元素滚动到视口中心时完全变黑的效果，核心思路是监听滚动事件，计算元素位置与视口的相对关系，动态调整背景色的暗度。以下是适配React项目的具体实现：

核心逻辑 #

1. 监听窗口滚动事件，实时获取.who元素的视口位置。
2. 计算元素从进入视口到中心抵达视口中心的滚动区间，将这段距离转化为0-1的进度值。
3. 用进度值控制背景色的暗度（从白色过渡到黑色），配合CSS过渡实现平滑效果。

代码实现（home.jsx） #

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

const Home = () => {
  const whoElement = useRef(null);
  const [darknessProgress, setDarknessProgress] = useState(0);

  useEffect(() => {
    const updateBackground = () => {
      if (!whoElement.current) return;

      const rect = whoElement.current.getBoundingClientRect();
      const viewportHeight = window.innerHeight;
      const elementCenterY = rect.top + rect.height / 2;
      // 计算过渡的起始和结束点：从元素顶部刚进入视口，到元素中心到达视口中心
      const transitionStart = viewportHeight;
      const transitionEnd = viewportHeight / 2;
      // 总过渡距离
      const totalTransitionDistance = transitionStart - transitionEnd;
      // 当前进度：0（未开始过渡）到1（过渡完成）
      const progress = (transitionStart - elementCenterY) / totalTransitionDistance;
      // 限制进度在0-1范围内，避免背景色异常
      const clampedProgress = Math.max(0, Math.min(1, progress));

      setDarknessProgress(clampedProgress);
    };

    window.addEventListener('scroll', updateBackground);
    // 页面加载时立即执行一次，初始化背景色
    updateBackground();

    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('scroll', updateBackground);
  }, []);

  return (
    <div 
      className="home-page" 
      style={{ 
        backgroundColor: `rgb(${255 * (1 - darknessProgress)}, ${255 * (1 - darknessProgress)}, ${255 * (1 - darknessProgress)})`,
        transition: 'background-color 0.15s ease-out'
      }}
    >
      {/* 页面顶部内容 */}
      <div className="top-content">
        {/* 这里放顶部的内容，比如导航、hero区等 */}
      </div>

      {/* 目标元素 */}
      <div className="who" ref={whoElement}>
        {/* .who元素的内容 */}
      </div>

      {/* 页面底部内容 */}
      <div className="bottom-content">
        {/* 底部内容 */}
      </div>
    </div>
  );
};

export default Home;

配套CSS #

.home-page {
  min-height: 200vh; /* 确保页面有足够的滚动空间 */
  width: 100%;
}

.who {
  /* 示例样式，让元素处于页面中间区域，可根据实际需求调整 */
  margin-top: 100vh;
  height: 600px;
  width: 100%;
  /* 可选：添加背景色方便观察位置 */
  background-color: #f0f0f0;
}

关键细节说明 #

• 位置计算：使用getBoundingClientRect()获取元素相对视口的位置，确保计算不受页面布局影响。
• 进度控制：通过Math.max(0, Math.min(1, progress))限制进度范围，避免背景色出现过暗或过亮的异常情况。
• 平滑过渡：CSS的transition属性让背景色变化更自然，过渡时间可根据需求调整（0.15s是比较自然的速度）。
• 初始执行：页面加载时立即调用updateBackground，避免初始状态下背景色与滚动位置不匹配。

内容的提问来源于stack exchange，提问作者Oliver Beerworth