React实现右侧固定左侧滚动效果及图片堆叠滚动方案咨询

核心思路 #

通过CSS定位实现固定元素，结合滚动容器与区块高度设置，实现左侧文本逐屏滚动的效果，无需依赖第三方库。

完整代码实现 #

React组件结构

import React from 'react';
import './ScrollEffect.css';

const ScrollDemo = () => {
  return (
    <div className="app-container">
      {/* 顶部固定标题 */}
      <header className="fixed-header">
        <h1>项目标题</h1>
      </header>

      <main className="main-content">
        {/* 左侧滚动文本区域 */}
        <section className="scrollable-left">
          <div className="text-section">文本内容1</div>
          <div className="text-section">文本内容2</div>
          <div className="text-section">文本内容3</div>
        </section>

        {/* 右侧固定区域 */}
        <aside className="fixed-right">
          <div>右侧固定内容</div>
        </aside>
      </main>
    </div>
  );
};

export default ScrollDemo;

配套CSS（ScrollEffect.css）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部固定标题：固定在视口顶部，层级最高避免被覆盖 */
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 主内容容器：留出标题高度的上边距，避免内容被标题遮挡 */
.main-content {
  margin-top: 60px;
  display: flex;
  min-height: calc(100vh - 60px);
}

/* 左侧滚动区域：占满剩余宽度，开启垂直滚动 */
.scrollable-left {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

/* 文本区块：每个区块占满视口剩余高度，实现逐屏显示 */
.text-section {
  height: calc(100vh - 60px - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

/* 右侧固定区域：固定在视口右侧，与标题底部对齐 */
.fixed-right {
  position: fixed;
  right: 0;
  top: 60px;
  width: 300px;
  height: calc(100vh - 60px);
  background: #eee;
  padding: 20px;
  box-shadow: -2px 0 4px rgba(0,0,0,0.1);
}

核心思路 #

监听滚动事件，根据滚动距离动态调整图片的位置、透明度和层级，模拟堆叠滚动的视觉效果。

完整代码实现 #

React组件结构

import React, { useEffect, useState } from 'react';
import './ImageStack.css';

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

  // 监听滚动事件，实时更新滚动距离
  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 示例图片列表，可替换为实际资源
  const images = [
    { src: '/image1.jpg', alt: '图片1' },
    { src: '/image2.jpg', alt: '图片2' },
    { src: '/image3.jpg', alt: '图片3' }
  ];

  return (
    <div className="image-stack-container">
      {images.map((img, index) => {
        // 计算偏移量：越靠后的图片滚动偏移越小，形成堆叠感
        const offset = scrollY * (0.3 * (images.length - index));
        // 计算透明度：滚动时逐渐显示下一张图片
        const opacity = Math.max(0, 1 - scrollY / 300 + index * 0.3);
        // 计算层级：滚动时切换图片的显示层级
        const zIndex = images.length - index + Math.floor(scrollY / 500);

        return (
          <div 
            key={index}
            className="stacked-image"
            style={{
              transform: `translateY(${offset}px) scale(${1 - index * 0.05})`,
              opacity,
              zIndex
            }}
          >
            <img src={img.src} alt={img.alt} />
          </div>
        );
      })}
    </div>
  );
};

export default ImageStackScroll;

配套CSS（ImageStack.css）

.image-stack-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.stacked-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 70vh;
  /* 平滑过渡动画，提升视觉体验 */
  transition: transform 0.1s ease-out, opacity 0.3s ease-out;
}

.stacked-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

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