如何使用Tailwind CSS在React中实现左固定右滚动后整体滚动的布局

AI 小北

2026-9-30

React + Tailwind CSS 实现左侧粘性、右侧滚动布局方案

修改后代码

直接替换你原有的类名配置即可，不需要额外编写JS逻辑：

<div className="mainDiv">
  <div className="rowDiv flex gap-8 w-full max-w-7xl mx-auto px-4">
    <div className="staticDiv w-2/5 sticky top-4 h-fit max-h-[calc(100vh-16px)] overflow-hidden">
      <ProductImages 
       images={productData.mediaUrls} 
      />
    </div>
    <div className="scrollableDiv w-3/5">
      <ProductInfo
       productData={productData}
      />
    </div>
  </div>
  <div className="relatedProductsDiv mt-12">
   <RelatedProducts 
    sectionHeading="Related products" 
   />
  </div>
  <div className="recentlyViewedProductsDiv mt-12">
   <RecentlyViewedProducts
    sectionHeading="Recently viewed products" 
   />
  </div>
</div>

配置说明

父容器rowDiv使用flex布局实现左右两列并排，可按需调整间距、最大宽度、页面内边距参数
左侧staticDiv核心配置逻辑：
- sticky触发粘性定位，仅在父容器rowDiv处于视口范围内时生效
- top-4设置粘性定位的触发位置为距离视口顶部4px，可修改为top-0实现完全贴顶
- h-fit让左侧高度自适应内容，max-h-[calc(100vh-16px)]限制最大高度不超过视口，避免内容溢出无法查看
- 如果左侧内容高度超过视口，可将overflow-hidden改为overflow-auto实现左侧内部滚动
右侧scrollableDiv无特殊定位，高度由内部商品信息内容自动撑开，滚动时正常上移，此时左侧始终粘在视口对应位置，直到整个rowDiv的底部滚动到视口顶部后，左右两列会一起向上滚动，露出下方的相关商品、最近浏览商品区块