Tengo una navegación de página completa en mi sitio web. Para asegurarse de que la página no se pueda desplazar cuando se abre la navegación, el cuerpo obtiene la clase 'sin desplazamiento' con el desbordamiento oculto. Esto también elimina la barra de desplazamiento cuando se abre el navegador.
Cuando se vuelve a presionar el botón de navegación y se cierra la navegación, la clase 'sin desplazamiento' se elimina del cuerpo, revelando la barra de desplazamiento de inmediato. La barra de navegación tarda 1,05 s en cerrarse por completo. Lo que traté de lograr es que la clase 'sin desplazamiento' no se elimine de inmediato, sino con un retraso. ¿Hay alguna manera de hacer esto?
Este es el código que tengo actualmente para agregar y eliminar la clase al hacer clic en el botón:
<script> // when DOM is ready document.addEventListener('DOMContentLoaded', () => { // on .nav-menu-button click document.querySelectorAll('.nav-menu-button').forEach(trigger => { trigger.addEventListener('click', function(){ this.x = ((this.x || 0) + 1)%2; if(this.x){ // 1st click document.querySelectorAll('body').forEach(target => target.classList.add('no-scroll')); } else{ // 2nd click (toggle) document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll')); } }); }); }); </script>¡Gracias por adelantado!
Puede usar la función setTimeout de WebAPI que ayuda en tales casos. Registra el tiempo de espera aproximado (mínimo) (en milisegundos, su caso es 1050), después del cual se ejecutará la función especificada. Al final el código se verá así:
setTimeout(() => { document.querySelectorAll('body').forEach( (target) => target.classList.remove('no-scroll') ); }, 1050);Podría usar la función setTimeout. Aquí he usado 5 segundos de retraso:
setTimeout(function(){ document.querySelectorAll('body').forEach(target => target.classList.remove('no-scroll')); },5000);Debe probar .add() y .remove() en lugar de classList.add() y classList.remove() :
document.querySelectorAll('body').forEach(target => target.remove('no-scroll'));