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

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:

https://codesandbox.io/s/loving-mendel-vbxdyt?file=/src/styles.css:0-166

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

CodePudding user response：

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

CodePudding user response：

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>