使用顺风和粘性独立滚动 div

Question

我无法让右侧的“独立滚动”div 独立于其左侧的同级 div 滚动。我希望能够在不更改评论之外的任何内容的情况下执行此操作<!-- CONTENT START --> <!-- CONTENT END -->。似乎很接近，但我被困住了。“滚动”和“独立滚动”div 始终一起滚动。我正在https://play.tai​​lwindcss.com/中运行此 程序，任何帮助将不胜感激。

<div class="flex bg-gray-100 justify-center">
  <div class="flex flex-col w-full max-w-5xl pb-7">
    <nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
      <div class="flex w-1/3">
        {Left}
      </div>
      <div class="flex justify-center  w-1/3">
        {Middle}
      </div>
      <div class="flex justify-end items-center w-1/3 gap-2">
        {Right}
      </div>
    </nav>

    <!-- CONTENT START -->
    <div class="flex">
      <div class="w-2/3">
        <div class="sticky top-16 w-full h-20 mb-2 bg-green-500">
          Don't scroll
        </div>
        <div class="w-full h-96 mb-2 bg-red-500">
          Scroll
        </div>
      </div>
      <div class="w-1/3 mb-2 h-[1000px] bg-pink-400">
        Scroll independently
      </div>
    </div>
    <!-- CONTENT END -->


    
    <footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
      <div class="flex items-center justify-end px-8 pt-1">
        <div class="text-sm text-white">{versionStr}</div>
      </div>
    </footer>
  </div>
</div>

Answer 1

这很好地清理了它：

https://play.tai​​lwindcss.com/Dbd5vnExhk

<div class="flex bg-gray-100 justify-center">
  <div class="flex flex-col w-full max-w-5xl pb-7">
    <nav class="sticky top-0 flex items-center justify-between bg-gray-700 text-white h-16 z-40 p-2">
      <div class="flex w-1/3">
        {Left}
      </div>
      <div class="flex justify-center  w-1/3">
        {Middle}
      </div>
      <div class="flex justify-end items-center w-1/3 gap-2">
        {Right}
      </div>
    </nav>

    <!-- CONTENT START -->
    <div class="flex">
      <div class="w-2/3">
        <div class="sticky top-16 w-full h-20 bg-green-500">
          Don't scroll
        </div>
        <div class="w-full h-[2000px] bg-gradient-to-b from-red-300 to-red-800">
          Scroll
        </div>
      </div>
      <div class="w-1/3 h-[calc(100vh-5.75rem)] sticky top-16 overflow-y-scroll overscroll-contain bg-pink-400">
      <div class="h-[1000px]">
        Scroll independently
      </div>
      </div>
    </div>
    <!-- CONTENT END -->


    
    <footer class="fixed inset-x-0 bottom-0 z-50 bg-gray-700 h-7">
      <div class="flex items-center justify-end px-8 pt-1">
        <div class="text-sm text-white">{versionStr}</div>
      </div>
    </footer>
  </div>
</div>