css+js实现滚动渐变

业务要求：
在页面中有一个

为了实现这一效果，可以采用CSS的linear-gradient结合JavaScript来动态调整背景颜色的透明度。下面是如何实现这一功能的具体步骤：

1. CSS样式定义
   首先，在CSS中定义一个类，用于设置content 的背景颜色和过渡效果。

.content {
  position: relative;
  background: transparent;
  transition: background 0.3s ease-in-out; // 如果效果很平滑不需要加
  margin: 0 -12px; // 如果区域自带padding的话可以用
  padding: 0 12px;// 如果区域自带padding的话可以用
}

2. JavaScript处理滚动事件
   然后，在JavaScript中监听窗口的滚动事件，并根据滚动距离动态改变背景颜色的透明度。

import { useEffect, useRef, useState, useMemo } from 'react';
import BannerArea from './components/BannerArea';
import styles from './index.module.less';

export default function AppList() {
  const [bannerList, setBannerList] = useState([]);
  const layoutRef = useRef<HTMLDivElement>(null);
  const bannerAreaRef = useRef<HTMLDivElement>(null);
  const [scrollTop, setScrollTop] = useState(0);
  const [bannerHeight, setBannerHeight] = useState(0);

  // 计算 bannerArea 的高度
  useEffect(() => {
    if (bannerList.length > 0 && bannerAreaRef.current) {
      setBannerHeight(bannerAreaRef.current.clientHeight);
    }
  }, [bannerList]);

  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      if (layoutRef.current) {
        setScrollTop(layoutRef.current.scrollTop);
      }
    };

    if (layoutRef.current) {
      layoutRef.current.addEventListener('scroll', handleScroll);
    }

    return () => {
      if (layoutRef.current) {
        layoutRef.current.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  // 根据滚动距离计算背景透明度
  const opacity = useMemo(() => {
    const newOpacity = Math.min(1, scrollTop / bannerHeight);
    return newOpacity;
  }, [scrollTop, bannerHeight]);

  return (
        <div
          className={styles.content}
          style={{ background: `rgba(247, 248, 252, ${opacity})` }}
        >
          {/* Banner区域 */}
          <div ref={bannerAreaRef}>
            {bannerList?.length ? <BannerArea bannerList={bannerList} /> : null}
          </div>
        </div>
    </Layout>
  );
}