En mi escenario, el código debería evitar el evento de desplazamiento predeterminado y usar scrollIntoView() para mover al usuario a una sección específica de acuerdo con la dirección de desplazamiento.
https://stackoverflow.com/a/4770179/9164633 Usé este método para evitar el evento predeterminado de desplazamiento.
Y detecto la dirección así,
preventDefault(e) { e.preventDefault(); if(this.waiting == false && this.forceInitialScroll != true) { if(e.deltaY && e.deltaY > 7) { this.scrollDirection = 'down'; this.checkScroll() }else if(e.deltaY && e.deltaY < -7) { this.scrollDirection = 'up'; this.checkScroll() }else { } } }, and Im pretty sure that both are working fine.Después de evitar el desplazamiento y detectar la dirección de desplazamiento, trato de desplazar al usuario a la sección así,
checkScroll() { let element; if(this.scrollDirection == 'down' && this.scrollIndex != 4 ) { element = document.getElementById(`section-${this.scrollIndex+1}`); }else if(this.scrollDirection == 'up' && this.scrollIndex != 0) { element = document.getElementById(`section-${this.scrollIndex-1}`); } this.waiting = true; if(element) { console.log(element) element.scrollIntoView({ behavior: 'smooth', block: 'center', }) } setTimeout(() => { if(this.waiting == true) { this.waiting = false; this.scrollDirection = null; } }, 450) }, this.waiting se utiliza para evitar que el formulario de usuario se desplace por más de una sección a la vez.
En Firefox, el navegador no desplaza al usuario correctamente, aunque funciona bien en Chrome.
Aparentemente, el comportamiento de Firefox con event.preventDefault() fue que bloqueó cualquier tipo de desplazamiento del usuario e incluso el desplazamiento manual js.
El problema en mi caso se resolvió ocultando el scroll en css en lugar de js usando overflow: hidden; y luego controlar el desplazamiento manualmente en lugar de evitar el comportamiento predeterminado.