如何在 TailwindCSS 中固定可滚动的侧边栏

Question

我发现了 BetterDev 边栏，如果我们向其中添加内容，边栏也会滚动。有没有办法使侧边栏固定且不可滚动？我试过sticky，用top-0和left-0修正，但是没用。

Image when content is not there
Image when content is there

    <div class="relative min-h-screen md:flex">
    
      <!-- mobile menu bar -->
      <div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
        <!-- logo -->
        <a href="#" class="block p-4 text-white font-bold">Better Dev</a>
    
        <!-- mobile menu button -->
        <button class="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    
      <!-- sidebar -->
      <div class="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
    
        <!-- logo -->
        <a href="#" class="text-white flex items-center space-x-2 px-4">
          <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
          </svg>
          <span class="text-2xl font-extrabold">Better Dev</span>
        </a>
    
        <!-- nav -->
        <nav>
          <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
            Home
          </a>
          <a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
            About
          </a>
          <a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
            Features
          </a>
          <a href="" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
            Pricing
          </a>
        </nav>
      </div>
    
      <!-- content -->
      <div class="flex-1 p-10 text-2xl font-bold">
        content goes here
      </div>
    
    </div>

如何使导航栏在中等断点后固定，并在添加大量内容时使内容可滚动？

Codepen Link

Answer 1

您可以通过让您的内容填满屏幕高度然后将 overflow-y-auto 添加到您想要滚动条的列（如果内容溢出）来实现此目的。

例如，您的容器 div 可能是：

<div class="relative md:flex h-screen overflow-hidden">

您的内容 div 可能是：

<div class="flex-1 p-10 text-2xl font-bold h-screen overflow-y-auto">

Codepen example

如何在 TailwindCSS 中固定可滚动的侧边栏

How to make scrollable sidebar fixed in TailwindCSS

html

css

sidebar

sass

tailwind-css