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