Encontré una publicación en StackOverflow que dice que debe usar lo siguiente para deshabilitar el desplazamiento horizontal:
html, body { overflow-x: hidden; }
Esta solución funcionó para mí. Sin embargo, ahora mi barra de navegación ya no responde. Antes del problema, funcionaba así: si se desplaza hacia abajo en la página, la barra de navegación se ocultará. Una vez que comience a desplazarse hacia arriba nuevamente, la barra de navegación estará visible nuevamente. ¿Alguien sabe cómo deshabilitar el desplazamiento horizontal mientras mantiene la funcionalidad de una/mi barra de navegación receptiva?
Código para la barra de navegación receptiva:
let prevScrollPos = window.pageYOffset; window.onscroll = () => { let currentScrollPos = window.pageYOffset; if (prevScrollPos > currentScrollPos) { document.getElementById("nav").style.top = "0"; } else { document.getElementById("nav").style.top = "-100px"; } prevScrollPos = currentScrollPos; };
¡Gracias!
¡ARREGLADO! :)
Aparentemente, solo necesitaba cambiar el código del elemento de mi barra de navegación de position: sticky
a position fixed
.