求基于Tailwind的React分层视差滚动组件解决方案

需要在页面指定区域实现分层视觉效果，具体是滚动时元素从底部向上浮现的视差效果。此前实现的整页版本在React组件场景下无法正常工作——设置bottom:0的fixed定位元素会定位到页面最底部，而非组件容器内部。需将其改写为可直接复用的React组件，优先使用Tailwind CSS。

此前的整页实现代码：

body {
    margin: 0;
}

#main {
    height: 700px;
    position: relative;
    z-index: 2;
    background: blue;
}

#revealed-section {
    height: 400px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: green;
}

#revealed-section-placeholder {
    height: 400px;
}

<div id="main">Scroll down!</div>
<div id="revealed-section-placeholder"></div>
<div id="revealed-section">
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
</div>

以下是适配React组件场景的实现，使用Tailwind CSS，通过监听容器内的滚动偏移量控制元素位移，避免fixed定位的全局问题：

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

const ParallaxRevealSection = () => {
  const containerRef = useRef(null);
  const contentRef = useRef(null);
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const scrollOffset = container.scrollTop;
      const contentHeight = contentRef.current.offsetHeight;
      const maxTranslate = contentHeight;
      const translateValue = Math.min(scrollOffset - 400, maxTranslate);
      setScrollY(Math.max(translateValue, 0));
    };

    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div 
      ref={containerRef}
      className="relative h-screen overflow-y-auto"
    >
      <div className="h-[700px] bg-blue-500 flex items-center justify-center text-white text-xl">
        Scroll down!
      </div>

      <div className="h-[400px]"></div>

      <div
        ref={contentRef}
        className="absolute bottom-0 left-0 w-full bg-green-500 transition-transform duration-300"
        style={{ transform: `translateY(-${scrollY}px)` }}
      >
        <div className="p-8">
          <h1 className="text-white text-2xl mb-8">Content here</h1>
          <h1 className="text-white text-2xl mb-8">Content here</h1>
          <h1 className="text-white text-2xl mb-8">Content here</h1>
          <h1 className="text-white text-2xl">Content here</h1>
        </div>
      </div>

      <div className="h-[400px]"></div>
    </div>
  );
};

export default ParallaxRevealSection;

关键实现说明 #

• 用relative定位的容器包裹所有元素，确保内容相对于容器定位，替代全局fixed定位
• 监听容器的scroll事件，计算滚动偏移量，动态调整内容区域的transform: translateY值，实现向上浮现效果
• 占位区域高度与内容区域一致，确保滚动到对应位置时触发位移
• 添加transition-transform过渡动画，让浮现效果更平滑

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