lapurita
lapurita

Reputation: 1175

how to split page in two halves, where each half is scrollable on it's own?

I want to have a page that's divided into two halves, and if you scroll up/down on one of the half, the other one should be unaffected.

Here is the code I've written so far, trying to do it with CSS grid:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.inner-1 {
  border-right: 1px solid black;
}

.left,
.right {
  height: 100%;
}
<div className="container">
  <div className="left">
    <p>left side</p>
  </div>
  <div className="right">
    <p>right side</div>
</div>

It does not work, if I scroll on one side, the other follows.

Here is a codesandbox link with react:

Should I do this with just CSS or is it easier together with JS?

Upvotes: 0

Views: 1301

Answers (2)

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5326

Example using display: flex with section:

body {
  margin: 0;
  display: flex;
}

section {
  width: 50%;
  height: 100vh;
  overflow-y: auto;
  font-size: 26vmin;
  word-wrap: break-word;
  display: inline-block;
}
<section>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</section>

<section>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</section>

Upvotes: 0

Nexo
Nexo

Reputation: 2331

This is html version, but it will sove your problem.

  • overflow-y:scroll will only work when cntent oevrflows. setting height:100% won't help you. Give some explicity height ans set overflow-y:scroll.

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.inner-1 {
  border-right: 1px solid black;
}

.left,
.right {
  height: 300px;
  overflow-y: scroll;
}

.left {
  border-right: 1px solid black;
}
<div class="container">
  <div class="left">
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
    <p>left side</p>
  </div>
  <div class="right">
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
    <p>right side</p>
  </div>
</div>

Upvotes: 1

Related Questions