Tengo un contenedor div right-col dentro de mi hero div, que contiene dos divs internos. Los divs internos son pegajosos y el div del contenedor se puede desplazar para dar la ilusión de que las cartas se deslizan hacia arriba.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="hero"> <div class="left-col">h</div> <div class="right-col"> <div class="top">1st card</div> <div class="bottom">2nd Card</div> </div> </div> <div class="projects">a</div> <div class="contact-footer"></div> <div></div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> </script> </html>CSS:
body{ overflow: auto; background-color: black; } .hero { display: flex; flex-direction: row; } .left-col{ width: 40vw; background-color: black; height: 100vh; } .right-col{ min-width: 60vw; background-color: blue; overflow: auto; height: 100vh; } .top{ height: 100vh; background-color: chartreuse; position: sticky; top: 0; } .bottom{ height: 100vh; background-color: orange; position: sticky; top: 10%; } .projects{ height: 100vh; background-color: crimson; position: sticky; top: 0; } Sin embargo, la barra de desplazamiento está en el interior del div right-col y es independiente de la barra de desplazamiento principal. ¿Hay alguna manera de que pueda usar la barra de desplazamiento principal para desplazarme por el div del contenedor hasta que llegue al final y luego continúe desplazándome por el resto de la página? ¿Posiblemente usando js o jquery?
Podría intentar agregar el siguiente css. Hará que la barra de desplazamiento interna tenga un ancho de 0, por lo que básicamente será invisible pero seguirá funcionando.
.hero ::-webkit-scrollbar { width: 0px; }Si necesita algo más específico, puede intentar usar el evento de desplazamiento para posiblemente sincronizar ambas barras de desplazamiento o algo así.