Estoy creando un sitio web horizontal, y estoy buscando una manera de hacer que el movimiento de desplazamiento hacia arriba/abajo resulte en un desplazamiento horizontal, por lo que no importa de qué manera decidas desplazarte, lo harás horizontalmente. Volteé toda la página 90 grados, así que no estoy seguro de si necesito desviar un desplazamiento horizontal a un desplazamiento vertical. ¿Alguien puede echar un vistazo? Mi página es jakobnatorp.com.
El css que utilicé es:
.site-content{ width:100vh; height:100vw; overflow-x:hidden; overflow-y: scroll; transform: rotate(-90deg) translateX(-100vh); transform-origin: top left; position:absolute; scrollbar-width:none; -ms-overflow-style:none; } .elementor-section-wrap{ transform: rotate(90deg) translateY(-100vh); transform-origin: top left; display:flex; flex-direction: row; width: 600vw; } .section{ width:100vw; height:10vh} ::-webkit-scrollbar{ display:none } body, html { overflow-x:scroll; overflow-y: hidden; }Pensé que usaría algo de javascript como
site-content.addEventListener('wheel', (ev) => { ev.preventDefault(); scrollableElement.scrollLeft += ev.deltaY + ev.deltaX; });Pero parece que no puedo hacerlo funcionar. Además, soy nuevo en javascript. Cualquier ayuda es apreciada. Gracias por adelantado.