Encontré esta página y me impresionó mucho cómo la dirección de desplazamiento cambiaba a mitad de página a horizontal y luego volvía a ser vertical.
No tengo la menor idea de cómo se hace eso. ¿Alguien puede llenarme?
Si observa la barra de desplazamiento, la dirección en realidad no se está cambiando. Durante la parte horizontal, el área de "desplazamiento" se position: fixed y llena la pantalla, luego se desplaza hacia la izquierda a medida que continúa desplazándose hacia abajo. Esto da la ilusión de desplazamiento horizontal cuando no lo hay.
Aquí hay un ejemplo, aunque sin la transición entre el desplazamiento vertical y horizontal.
document.onscroll = () => { // adjust for the difference between window height and width let percentScrolled = window.pageYOffset / window.innerHeight; let toScroll = percentScrolled * window.innerWidth; // scroll horizontally document.getElementById("scroll").style.left = "-" + toScroll + "px"; } body { width: 100vw; height: 500vh; overflow-x: hidden; } div { width: 500vw; position: fixed; } <div id = "scroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac leo nulla. Donec volutpat consequat elit ut tincidunt. Proin id purus sed nulla lacinia eleifend sed porttitor neque. Vestibulum volutpat porta ex. Aenean accumsan metus eu euismod semper. Phasellus viverra tortor eget enim ultrices, quis dignissim lectus posuere. Nullam turpis nisl, fringilla gravida interdum nec, semper et tellus. Etiam vitae rutrum ligula. Nulla lobortis massa odio, id tempor leo dictum sit amet. Nulla ut porta orci. Maecenas pulvinar est ac est accumsan, non consequat augue lobortis. Morbi semper sollicitudin eros, sit amet lacinia nulla varius a. Nam dignissim faucibus risus, eleifend tincidunt dolor scelerisque a. Quisque tempus, quam efficitur feugiat laoreet, sapien eros aliquam erat, auctor feugiat lacus ipsum id nisl. In nisi urna, laoreet eget pulvinar dignissim, maximus laoreet augue. Vivamus euismod mauris nec felis posuere, eu maximus ante volutpat. Integer porttitor urna quis vehicula feugiat. Integer justo nibh, rutrum pulvinar massa quis, molestie pretium ipsum.</div>