Estoy tratando de recrear el comportamiento de desplazamiento de esta página .
Básicamente, hay dos columnas desplazables sobre el pliegue, pero la profundidad de desplazamiento de una debe estar limitada por/relacionada con la profundidad de desplazamiento actual de la otra columna. Si alcanza X píxeles de profundidad de desplazamiento en #scrollOne, entonces #scrollTwo debería desplazarse hacia arriba hasta una cierta profundidad de desplazamiento y luego dejar de desplazarse.
Tengo dos divs dentro de un contenedor de cuadrícula:
<div class="container"> <div id="scrollOne" class="scrollable">{....content....}</div> <div id="scrollTwo" class="scrollable">{....content....}</div> </div> <div>....other content below...</div>Y el siguiente CSS:
.container { overflow: hidden; } .scrollable { overflow-y: scroll; height: 75vh; scrollbar-width: none; }Todo esto funciona como me gustaría, excepto que no puedo hacer que los dos divs se muevan entre sí cuando sea necesario. Cualquier ayuda o idea sería muy apreciada.
Puedes lograr esto con una posición pegajosa.
*{ padding: 0px; margin: 0px; font-family: sans-serif; box-sizing: border-box; } .container { position: relative; } section, aside{ display: inline-block; float: left; padding: 20px; } section{ width: 60%; border-right: 1px solid #afafaf; } aside{ margin-top: 100px; position: -webkit-sticky; position: sticky; border-bottom: 1px solid #afafaf; top: 0px; width: 40%; } .clear-prefix { content: ''; display: block; clear: both; } <div class="container"> <section> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived five centuries and the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </section> <aside>Aside</aside> <div class="clear-prefix"></div> </div>