Estoy trabajando en este proyecto en el que necesito tanto un oyente de desplazamiento como un ajuste de desplazamiento, por lo que puedo usar una rueda del mouse con un contenedor horizontal de pantalla completa que se ajusta entre secciones. (Cuando el usuario se desplaza verticalmente, se desplaza en el eje X).
Puedo hacer que ambos funcionen por separado, pero no juntos. Cuando habilito la función JS on scroll, evita que funcione el ajuste de desplazamiento.
Intenté todo lo que sé, intenté cambiar las propiedades de altura/desbordamiento de otros contenedores e intenté apuntar a otros elementos además del cuerpo o la ventana. ¿Cuál sería la mejor solución?
El fragmento aquí está ajustado para funcionar con el oyente de desplazamiento en este momento
const scrollContainer = document.querySelector('.container'); scrollContainer.addEventListener('wheel', (e) => { e.preventDefault(); scrollContainer.scrollLeft += e.deltaY; }); * { margin: 0; } .container { display: flex; overflow-x: scroll; /*scroll-snap-type: x mandatory;*/ } section { height: 100vh; width: 300vw; min-width: 100vw; /*scroll-snap-align: start;*/ } #section1 { background: red; } #section2 { background: yellow; } #section3 { background: blue; } <html> <div class="container"> <section id="section1"></section> <section id="section2"></section> <section id="section3"></section> </div> </html>Cuando agrego el siguiente código para habilitar el ajuste de desplazamiento. Impide que el detector de eventos de la rueda funcione correctamente.
.container { scroll-snap-type: x mandatory; } section { scroll-snap-align: start; }