Estoy luchando con scroll-snap en CSS.
¿Hay alguna manera de usar scroll-snap solo en una dirección vertical?
Quiero que se ajuste a cada sección cuando me desplace hacia abajo, pero no que se ajuste cuando vuelva a desplazarme hacia arriba. ¿Es posible dentro de CSS o necesito algo de JavaScript?
html { scroll-snap-type: y mandatory; } body { margin: 0; scroll-snap-type: y mandatory; } section { font-family: sans-serif; font-size: 12ch; min-height: 100vh; display: flex; justify-content: center; align-items: center; scroll-snap-align: start; } <head> <!-- MAIN STYLE --> <link rel="stylesheet" href="style.css"> </head> <main> <section> <h1>Hello!</h1> </section> <section> <h1>Toodles~</h1> </section> <section> <h1>Boodles~</h1> </section> </main> </html>Puede escuchar el evento de desplazamiento y establecer la propiedad scroll-snap-type en el elemento html de acuerdo con la dirección de desplazamiento.
//save initial scrollY position var previousScrollY = window.scrollY; //listen to scroll event window.addEventListener("scroll", function(e) { //is the user scrolling down ? let down = window.scrollY > previousScrollY; //set scroll-snap-type according to scroll direction document.documentElement.style.scrollSnapType = down ? "y mandatory" : ""; //save current scrollY position previousScrollY = window.scrollY; }); body { margin: 0; } section { font-family: sans-serif; font-size: 12ch; min-height: 100vh; display: flex; justify-content: center; align-items: center; scroll-snap-align: start; } <section> <h1>Hello!</h1> </section> <section> <h1>Toodles~</h1> </section> <section> <h1>Boodles~</h1> </section>Según mi investigación, no hay solución usando CSS, y para lograr esto, use un evento de desplazamiento de ventana de JavaScript y, al desplazarse hacia arriba, elimine la propiedad scrollSnapType CSS.