¿Cómo bloquear el desplazamiento de una página web temporalmente?

Question

¿Cómo puedo bloquear el desplazamiento de una página web temporalmente cuando se muestra un cuadro de diálogo? Tengo un cuadro de diálogo dentro del cual quiero habilitar el desplazamiento después de desactivar el desplazamiento de la página web superpuesta.

¿Hay un comando js en temporalmente desactivar el desplazamiento?

Answer 1

Puede establecer un elemento contenedor o incluso el cuerpo en overflow: hidden con un ancho y alto de la ventana del navegador. De esta forma, cualquier contenido desbordado caerá de la página y las barras de desplazamiento nunca se mostrarán. Esto se puede configurar en una declaración css como body.dialog-open { overflow: hidden; }. A continuación, puede agregar y eliminar el nombre de clase .dialog-open cuando se abre y se cierra el cuadro de diálogo.

El ancho y la altura pueden no ser necesarios si se configura esto en el cuerpo, pero tendría que verificar la compatibilidad del navegador con ese. Podría obtener algunos resultados inesperados allí.

edit: Si desea desplazarse dentro de su cuadro de diálogo, puede establecer overflow: auto allí, con una altura establecida en ese elemento.

Los navegadores antiguos (especialmente IE) pueden mostrar también una barra de desplazamiento horizontal, es posible que deba establecer overflow-x: hidden si ese es el caso.

Consulte también: CSS div element - how to show horizontal scroll bars only? para obtener más información sobre las barras de desplazamiento.

Answer 2

EDITAR Prueba esto:

En diálogo abierto (quitar la barra de desplazamiento y evitar que el usuario de desplazamiento):

$('body').css({'overflow':'hidden'}); 
    $(document).bind('scroll',function() { 
     window.scrollTo(0,0); 
    }); 

En diálogo Cerrar (permitir al usuario desplazarse de nuevo):

$(document).unbind('scroll'); 
    $('body').css({'overflow':'visible'});