CODEWITHSUNDEEP
htmlcssscrollbar
user7030651
user7030651

Reputation:

CSS : Scroll two div side by side independently

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.

Upvotes: 2

Views: 9690

Answers (3)

dankswoops
dankswoops

Reputation: 173

For all the React/Next JS and Tailwind Devs.

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

Upvotes: 0

Banzay
Banzay

Reputation: 9470

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>

Upvotes: 5

Krishna9960
Krishna9960

Reputation: 529

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

Working Fiddle https://jsfiddle.net/DTcHh/29480/

Upvotes: 2

Related Questions