CSS：独立滚动两个div

Question

我在两列中都有两列和一些内容。

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

我有固定标题，当我滚动时，两个div也在滚动。

我希望每当我想这样做时只滚动一个div。

.b-r{
  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 b-r 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 b-r padding_bottom_70" >
  <p class="margin_top_600px">
  Right side Data
  </p>
  
</div>
</div>

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

任何帮助都会很棒。

谢谢。

Answer 1

您需要设置身高和overflow: auto;至.b-r：

＆＃13;

＆＃13;

.b-r{
  border-right: thin black solid;
  height: 100vh;
  overflow: auto;
}

.margin_top_600px{
  margin-top:600px;
}

＆＃13;

<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 b-r 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 b-r padding_bottom_70" >
  <p class="margin_top_600px">
  Right side Data
  </p>
  
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

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

滚动可用隐藏的滚动条

＆＃13;

＆＃13;

.b-r{
  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;
}

＆＃13;

    <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 b-r padding_bottom_70" >
      <div class="scrll_hide">
      <p class="margin_top_600px">
      Left side Data
      </p>
      </div>
    </div>

    <div class="col-xs-6 b-r padding_bottom_70" >
      <div class="scrll_hide">
      <p class="margin_top_600px">
      Right side Data
      </p>
      </div>
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

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/