CSS：独立滚动两个div [英] CSS : Scroll two div side by side independently

问题描述

我想在内容大的时候滚动到每个div。

我有固定的标题，当我滚动时，两个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 =stylesheetintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =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>左侧数据< / 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>右侧数据< / p> < / div>< / div>

滚动只有左侧的数据，然后只有该div应该滚动。

任何帮助都会很好。

谢谢。

解决方案

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

  .br {边界 - 右：薄的黑色固体;身高：100vh; overflow：auto;}。margin_top_600px {margin-top：600px;}  

< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheetintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =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>左侧数据< / 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>右侧数据< / p> < / div>< / div>

隐藏滚动条你需要用 overflow-y：scroll; 来定义一个更多的包装div。外部div应该有 overflow：hidden;

滚动可以隐藏滚动条

.br {border-right：thin black solid;身高：100vh; overflow：hidden;}。margin_top_600px {margin-top：600px;}。scrll_hide {float：right;身高：100％;宽度：计算（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 =stylesheetintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =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>左侧数据< / p> < / DIV> < / DIV> < div class =col-xs-6 b-r padding_bottom_70> < div class =scrll_hide> < p class =margin_top_600px>右侧数据< / p> < / DIV> < / DIV> < / div>

I have two columns and certain contents in both the columns.

I want a scroll to the each div when content is bigger.

I have fixed header and when I scroll then two divs is also scrolling.

I want only one div to be scrolled whenever I want to do so.

.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>

If I want to scroll for only left side data then only that div should scroll.

Any help would be great.

Thank you.

解决方案

You need to set height and overflow: auto; to .b-r:

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

To hide scrollbar you need to define one more wrapping div with overflow-y: scroll;. Outer div should have overflow: hidden;

scroll available with hidden scrollbars

.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;
}

    <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>

这篇关于CSS：独立滚动两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！