React实现指定Div滚动及Header固定布局的技术问询

嘿，这个需求其实很常见，我来给你拆解一下实现方式～

核心思路是通过CSS定位配合React组件结构来实现，和amazon.in的效果逻辑一致，下面给你两种稳定的实现方案：

方案一：纯CSS定位（最简单直观） #

这种方案直接用CSS固定定位，是最容易上手的实现方式，适合header高度固定的场景。

React组件代码示例 #

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

const MovieApp = () => {
  return (
    <div className="app-container">
      {/* 固定在顶部的Header */}
      <header className="app-header">
        <h1>我的电影应用</h1>
        {/* 这里可以添加搜索栏、导航按钮等内容 */}
      </header>

      {/* 可垂直滚动的内容区域 */}
      <main className="content-container">
        {/* 模拟电影列表内容，实际项目中替换成你的电影卡片组件 */}
        {Array.from({ length: 50 }).map((_, index) => (
          <div key={index} className="movie-card">
            电影 {index + 1}
          </div>
        ))}
      </main>
    </div>
  );
};

export default MovieApp;

配套CSS（MovieApp.css） #

/* 全局重置，避免默认边距影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  /* 关键：固定在视口顶部 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 设置背景色，防止滚动时内容透过header显示 */
  background-color: #fff;
  /* 添加阴影增强层次感，和amazon的效果对齐 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* 固定header高度，方便内容区域计算偏移量 */
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  /* 确保header始终在内容上方 */
  z-index: 100;
}

.content-container {
  /* 关键：给内容区域设置顶部边距，避开fixed定位的header */
  margin-top: 60px;
  /* 开启垂直滚动 */
  overflow-y: auto;
  /* 占满容器剩余高度 */
  flex: 1;
  padding: 20px;
}

.movie-card {
  height: 150px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

方案二：动态计算Header高度（适配响应式场景） #

如果你的header高度会随屏幕尺寸变化（比如移动端和PC端高度不同），可以用这个方案动态计算偏移量：

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

const MovieApp = () => {
  const headerRef = useRef(null);
  const [headerHeight, setHeaderHeight] = useState(0);

  useEffect(() => {
    // 初始化获取header高度
    if (headerRef.current) {
      setHeaderHeight(headerRef.current.offsetHeight);
    }

    // 监听窗口大小变化，实时更新header高度
    const handleResize = () => {
      if (headerRef.current) {
        setHeaderHeight(headerRef.current.offsetHeight);
      }
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时移除监听
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className="app-container">
      <header ref={headerRef} className="app-header">
        <h1>我的电影应用</h1>
      </header>

      <main 
        className="content-container"
        style={{ marginTop: `${headerHeight}px` }}
      >
        {/* 电影列表内容 */}
        {Array.from({ length: 50 }).map((_, index) => (
          <div key={index} className="movie-card">
            电影 {index + 1}
          </div>
        ))}
      </main>
    </div>
  );
};

export default MovieApp;

CSS部分和方案一基本一致，只是不需要硬写margin-top:60px，由React动态设置。

关键注意点 #

• 一定要给header设置背景色，否则滚动时下方内容会透过header显示，破坏体验。
• 给header添加z-index确保它始终在内容上方，避免被其他元素遮挡。
• 内容区域的overflow-y: auto只会在内容超出容器高度时显示滚动条，不会出现多余的滚动条。

这样实现后，滚动页面时header就会像amazon的页面一样固定在顶部，下方的内容可以自由滚动啦～

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