CSS：独立并排滚动两个div

Question

我有两列，两列中都有某些内容。

当内容更大时，我想要滚动到每个 div。

我已经修复了 header，当我滚动时，两个 div 也在滚动。

我只想滚动一个 div。

 .br{ border-right: thin black solid; }.margin_top_600px{ margin-top:600px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 br padding_bottom_70" > <p class="margin_top_600px"> Left side Data </p> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 br padding_bottom_70" > <p class="margin_top_600px"> Right side Data </p> </div> </div>

如果我只想滚动左侧数据，那么只有那个 div 应该滚动。

任何帮助都会很棒。

谢谢你。

Answer 1

您需要设置高度和overflow: auto; 到.br ：

 .br{ border-right: thin black solid; height: 100vh; overflow: auto; } .margin_top_600px{ margin-top:600px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 br padding_bottom_70" > <p class="margin_top_600px"> Left side Data </p> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 br padding_bottom_70" > <p class="margin_top_600px"> Right side Data </p> </div> </div> 

要隐藏滚动条，您需要使用overflow-y: scroll;定义另一个包装div overflow-y: scroll; 。 外部div应该有overflow: hidden;

可用隐藏的滚动条滚动

 .br{ border-right: thin black solid; height: 100vh; overflow: hidden; } .margin_top_600px{ margin-top:600px; } .scrll_hide { float: right; height: 100%; width: calc(100% + 48px); overflow-y: scroll; margin: 0 -32px 0 0 !important; box-sizing: border-box; } 

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container-fluid"> <div class="row"> <div class="col-xs-6 br padding_bottom_70" > <div class="scrll_hide"> <p class="margin_top_600px"> Left side Data </p> </div> </div> <div class="col-xs-6 br padding_bottom_70" > <div class="scrll_hide"> <p class="margin_top_600px"> Right side Data </p> </div> </div> </div> 

Answer 2

    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 my-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam neque repellat libero facere, inventore natus! Laudantium laborum unde veritatis, nemo commodi ducimus quasi quam incidunt accusamus dolore asperiores optio repellendus!
      </div>
      <div class=" col-lg-6 col-md-6 col-sm-6 col-xs-6 my-content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem soluta corrupti, veniam sit, delectus sunt ipsum placeat recusandae eaque, voluptatum nemo optio cumque omnis veritatis quam itaque ab. Cupiditate, exercitationem?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolorem adipisci sint ducimus voluptates eveniet qui nisi error reiciendis laborum sed, neque officia aspernatur omnis dolore consequuntur, natus optio, mollitia!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dignissimos enim expedita temporibus iure. Quam vitae autem laborum magnam optio nihil quisquam, est aliquid perspiciatis quia tempora cumque, enim vel.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quis veritatis, alias dicta, commodi adipisci sint natus reiciendis. Atque eius labore alias cum ratione beatae provident voluptatum eum id mollitia.
      </div>
    </div>


.my-content{
  height: 200px;
  overflow: auto;
  border: 1px solid #000;
}

工作小提琴https://jsfiddle.net/DTcHh/29480/

Answer 3

对于所有 React/Next JS 和 Tailwind 开发者。

<div className="flex overflow-auto">
  
  <div className="overflow-auto w-1/4">
    <div className="flex flex-col w-full bg-red-200 h-[1000px]">
      a
    </div>
  </div>

  <div className="overflow-auto w-3/4">
    <div className="flex flex-col w-full bg-blue-200 h-[1000px]">
      a
    </div>
  </div>

</div>