Guía / Artículo

Bloquear el desplazamiento de la página en el flujo de Web

Flowbase
30 de octubre de 2020
Bloquear el desplazamiento de la página en el flujo de Web

Bloquear el desplazamiento de la página cuando el menú está abierto.

Con este sencillo código puede bloquear la capacidad de desplazamiento de su sitio web.

Esto es útil cuando se utiliza una superposición de menú personalizada y se desea impedir que los usuarios se desplacen por la página cuando el menú está abierto.

Primer paso

Add the following code into the header section of your page custom code.


/* Lock Scroll */
html.no-scroll {overflow: hidden;}

Segundo paso

Añade el siguiente código en la sección anterior del cuerpo de tu código personalizado


$('.burger').on('click', toggleScrolling);
function toggleScrolling()
{$('html').toggleClass('no-scroll');
}

Este script dice básicamente que cuando se hace clic en un objeto con la clase '.burger' entonces tenemos que cambiar una función CSS que establece el desbordamiento a oculto.

Paso tres

Agregue la hamburguesa de la clase al botón de su menú para que al hacer clic se active y desactive.

Flowbase
30 de octubre de 2020

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.