Quiero tener una página dividida en dos mitades, y si te desplazas hacia arriba o hacia abajo en una de las mitades, la otra no debería verse afectada.
Aquí está el código que he escrito hasta ahora, tratando de hacerlo con cuadrícula CSS:
.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>No funciona, si me desplazo por un lado, sigue el otro.
Aquí hay un enlace de codesandbox con reaccionar:
¿Debo hacer esto solo con CSS o es más fácil junto con JS?
Esta es la versión html , pero solucionará su problema.
overflow-y:scroll solo funcionará cuando el contenido se desborde. height:100% no te ayudará. Proporcione algo de height explícita y establezca 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>Ejemplo usando display: flex con 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>