在 Tailwind CSS 中仅滚动网格的一部分

Question

我正在使用 Tailwind CSS 开发一个布局，该布局涉及带有固定标题和主要内容区域的网格结构。主要内容区域分为左、中、右三部分。

<div class="grid min-h-screen grid-cols-[0_1fr] grid-rows-[98px_1fr] xl:grid-cols-[auto_1fr]">
  <!-- Fixed Header -->
  <div class="sticky top-0 col-span-full row-start-1 grid grid-cols-2 grid-rows-2 items-center bg-red-500">Header</div>

  <!-- Main Content Area -->
  <main class="col-start-2 col-end-3 row-start-2 grid grid-cols-4 sm:grid-cols-8 xl:grid-cols-12">
    <div class="col-span-full grid grid-cols-[repeat(11,1fr)] grid-rows-[1fr]">
      <!-- Left Section -->
      <div class="col-start-3 col-end-5 flex justify-center bg-green-500">Left</div>

      <!-- Center Section (scrollable) -->
      <div id="overflowThisDiv" class="col-start-5 col-end-10 overflow-y-scroll bg-white">
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
      </div>

      <!-- Right Section -->
      <div class="col-start-10 col-end-12 flex justify-center bg-black text-white">Right</div>
    </div>
  </main>
</div>

我想实现一个可滚动的中心部分（测试 div），同时保持左右部分固定。目前，当我滚动时，整个网格都会滚动，包括左侧和右侧部分。

如何修改Tailwind CSS或HTML结构以确保只有中心部分（测试div）垂直滚动，保持左右部分的固定位置？

所有 3 个 div 应采用最大屏幕垂直尺寸，而中心 div 如果其内容超过所述 div 的高度则可滚动

是否也可以滚动页面上的任意位置以仅开始滚动中心 div？

任何见解或代码示例将不胜感激。

Tailwind 游乐场示例：

https://play.tailwindcss.com/WNBtszn3Ek

Answer 1

您可以在两个外部列内添加固定 div。这允许您滚动页面上的任何位置以仅移动中心列。

我希望我的解决方案是您正在寻找的。

<div class="grid min-h-screen grid-cols-[0_1fr] grid-rows-[98px_1fr] xl:grid-cols-[auto_1fr]">
  <div class="sticky top-0 col-span-full row-start-1 grid grid-cols-2 grid-rows-2 items-center bg-red-500">Header</div>
  <main class="col-start-2 col-end-3 row-start-2 grid w-full grid-cols-4 sm:grid-cols-8 xl:grid-cols-12">
    <div class="col-span-full grid w-full grid-cols-[repeat(11,1fr)] grid-rows-[1fr]">
      <div class="col-start-1 col-end-3 flex justify-center bg-green-500">
        <div class="fixed">Left</div>
      </div>
      <div class="col-start-3 col-end-10 bg-white">
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
        <div class="flex h-[500px] items-center justify-center bg-orange-400">Test</div>
      </div>
      <div class="col-start-10 col-end-12 flex justify-center bg-black text-white">
        <div class="fixed">Right</div>
      </div>
    </div>
  </main>
</div>

这是演示：https://play.tailwindcss.com/wAPoI8AruW