单个滚动条

如何解决单个滚动条

目前，我有一个nav元素向左浮动，一个div向右浮动。我如何使它们每个都有一个独立的滚动条，即它们不会同步滚动？我尝试将overflow-y: auto都添加到两者均未成功。仅供参考，我正在使用Tailwind CSS。

解决方法

这是一个使用flex

的简单示例

float和overflow的复杂交互已得到充分记录，并经常用作浮动布局的clearfix。

由于您正在使用Tailwind，因此您绝对应该利用其flexbox或网格模板样式来描述您的内容。

Tailwind示例：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="w-screen h-screen flex flex-row">
  <nav class="bg-gray-600 w-1/4 flex-none p-4 overflow-y-scroll">
    <p>
      Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean vel nulla at dui auctor lacinia. Nam elit est,viverra ut interdum id,iaculis id nunc. Maecenas est ipsum,malesuada at elementum a,placerat a lorem. Morbi scelerisque neque at massa malesuada,et condimentum metus elementum. Donec dignissim mattis arcu,varius congue ante dignissim vitae. Fusce faucibus nunc ut nibh aliquam fringilla. Proin bibendum neque sit amet enim tempus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. Donec nunc dui,pellentesque a ipsum vel,dignissim sollicitudin mi. Orci varius natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Morbi vel neque id elit commodo gravida. Aliquam erat volutpat. Vivamus ex mi,consequat vehicula sodales in,placerat eu eros. Cras a dolor nec metus iaculis porta sit amet eget leo. Quisque leo neque,dapibus sit amet tellus et,mattis eleifend orci. Sed ac nisl a lacus elementum pulvinar.
    </p>
    <p>
      Phasellus suscipit quis nisl id aliquet. Duis convallis,lorem quis laoreet posuere,enim dolor feugiat dolor,malesuada cursus est erat sit amet augue. Ut vulputate risus nulla,in tempor orci gravida et. Praesent placerat nulla sit amet bibendum vulputate. In eleifend augue in arcu accumsan,non ullamcorper turpis cursus. Sed tempus massa nec mauris lobortis malesuada. Ut ipsum dui,rutrum condimentum scelerisque ut,efficitur sit amet eros. Proin vehicula tortor et lobortis vulputate. In in arcu eget eros pharetra posuere ac a quam. Nam nulla purus,feugiat sollicitudin nunc at,blandit bibendum erat. Vivamus iaculis pellentesque placerat. Mauris massa diam,feugiat vitae nunc non,hendrerit dictum eros. Suspendisse tristique quis augue in sollicitudin. Nunc sed ex id arcu placerat volutpat ac ut eros. Aliquam quis nibh posuere,placerat nulla eget,accumsan nisi.
    </p>
    <p>
      Suspendisse quis leo pretium tortor varius condimentum. Ut aliquam risus id nibh tempus,ut ultrices tortor tristique. Praesent congue sagittis neque sed accumsan. Nullam vel metus eget ex venenatis interdum hendrerit non nunc. Duis sit amet nibh in lacus eleifend semper ac a mauris. Nam eu massa et augue pulvinar rutrum nec sodales ante. Phasellus quis dolor fringilla,consectetur turpis nec,molestie arcu. Morbi ullamcorper ex justo,at porttitor dui aliquet non. Curabitur ut bibendum nisl,vel varius purus. Praesent arcu felis,facilisis ut nibh id,ultrices auctor lacus. Cras dignissim sit amet augue eu efficitur. Cras venenatis accumsan finibus. Suspendisse sagittis facilisis massa in rutrum. Nam pulvinar fermentum ultricies. Phasellus eleifend elit ac aliquet malesuada.
    </p>
    <p>
      Morbi vel ipsum eget mi congue dignissim non sed risus. Sed cursus nisl diam,id faucibus ligula bibendum sed. Praesent tincidunt enim suscipit,fringilla nunc id,venenatis mi. Donec non ante id nisi rhoncus volutpat. Praesent pretium tellus eu tellus sodales,eu egestas nisi maximus. In vestibulum ultricies orci sit amet aliquet. Vestibulum eu felis eget mauris facilisis imperdiet. Suspendisse non nisi mauris. Proin id elit massa. Vivamus quis aliquet purus,in volutpat diam. Aliquam molestie ligula eget lacus tincidunt,ut ultrices purus sodales. Nulla varius ante tortor,non tempus odio posuere sit amet.
    </p>
    <p>
      Aliquam scelerisque diam a mollis interdum. Ut vitae eros at ipsum vehicula luctus id sit amet quam. Cras at egestas ante,sed blandit arcu. Praesent porttitor nec justo blandit aliquet. In vulputate nisl erat,rhoncus mattis turpis consequat non. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Curabitur consectetur risus vulputate lectus pharetra,nec convallis arcu commodo. Maecenas faucibus hendrerit imperdiet. Morbi rutrum efficitur nunc a dapibus. Phasellus consectetur eros in est blandit tincidunt. Phasellus a urna risus. Nulla lacinia feugiat dolor,aliquam tristique nibh accumsan eu. Nulla laoreet purus et magna pulvinar,et aliquam massa commodo.
    </p>
  </nav>
  <div class="bg-green-600 w-3/4 flex-none p-4 overflow-y-scroll">
    <p>
      Lorem ipsum dolor sit amet,et aliquam massa commodo.
    </p>
  </div>
</div>

纯CSS示例：

body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

nav {
  background-color: gray;
  overflow-y: scroll;
  flex-basis: 25%;
  padding: 1rem;
}

#right {
  background-color: green;
  overflow-y: scroll;
  flex-basis: 75%;
  padding: 1rem;
}

<div class="container">
  <nav>
    <p>
      Lorem ipsum dolor sit amet,et aliquam massa commodo.
    </p>
  </nav>
  <div id="right">
    <p>
      Lorem ipsum dolor sit amet,et aliquam massa commodo.
    </p>
  </div>
</div>

,

我喜欢用flex来做。关键是在flex父级上设置min-h-0。否则，它将随孩子一起成长，然后整个身体将开始滚动。在此示例中，如果需要，它还将在x轴上具有单独的滚动条。

请注意，p标签上的内联样式只是为侧边栏和主区域提供了较大的内容。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex h-screen w-screen min-h-0 min-w-0">
  <aside class="h-full w-64 bg-teal-900 text-white border-r overflow-auto">
    <p style="height: 200%">
      What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
      book it has?
    </p>
  </aside>
  <main class="h-full flex-1 overflow-auto">
    <p style="height: 200%">
      What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
      book it has?
    </p>
  </main>
</div>

当您想在顶部或底部放置导航栏和页脚时，变得更具挑战性。这是您真正需要的最小高度的地方。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-col h-screen w-screen min-h-0 min-w-0">
  <nav class="p-1 border-b bg-gray-200">navbar</nav>
  <section class="flex flex-1 min-h-0 min-w-0">
    <aside class="h-full w-64 bg-teal-900 border-r overflow-auto">
      <p style="height: 200%">
        What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
        book it has?
      </p>
    </aside>
    <main class="flex-1 h-full overflow-auto">
      <p style="height: 200%">
        What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen
        book it has?
      </p>
    </main>
  </section>
</div>