Tengo un cuadro de superposición que está fijo y centrado en la pantalla. La página en sí es bastante larga y tiene una barra de desplazamiento vertical.

Me gustaría deshabilitar el desplazamiento de la página una vez que se muestre la superposición. Sin embargo, no puedo desactivar el desplazamiento por completo porque algunas superposiciones tienen overflow-y:scroll por sí mismas. Por lo tanto, el contenido de la superposición debe desplazarse pero la página en sí debe estar atascada.

¿Alguna idea de cómo resolver eso con jquery o css?

8
matt 25 jul. 2011 a las 16:09

5 respuestas

La mejor respuesta

La forma más rápida y sucia que se me ocurre es adjuntar un detector de eventos a la ventana para eventos de desplazamiento y prevenirDefault () si su superposición es visible.

Así (usando jquery).

   window.addEventListener('scroll', function(e){
        var el = $('.overlay.active');

        if( el.length > 0 ){
            e.preventDefault();
        }   
   });

Espero que esto sea lo que estás buscando.

6
AshHeskes 25 jul. 2011 a las 12:30

Puede crear un contenedor de ancho completo y alto completo, con position: fixed. Y dentro de este contenedor, cree su superposición real con información. El contenedor básicamente impide al usuario desplazarse o interactuar con la página.

0
jeroen 26 jul. 2013 a las 18:33

Puede colocar su superposición como {position: fixed;}. Eso mantendrá su superposición en su pantalla incluso si su página se desplaza.

0
jrharshath 25 jul. 2011 a las 12:13

Puede configurar body en overflow: hidden. Esto evitará el desplazamiento. Las declaraciones de desbordamiento del niño no se verán afectadas. He hecho un poco de fiddle.

4
marc 25 jul. 2011 a las 12:20

Solo un ajuste a la solución jQuery de Marc. Mi código deshabilita el desplazamiento del cuerpo cuando aparece la superposición, luego, cuando se hace clic en el botón de cerrar el cuerpo o la superposición, el desplazamiento del cuerpo se vuelve a habilitar.

/*We disable the scroll*/

$(function() {
/*This is where we specify what button is being clicked to open the 
overlay, change at will.*/
$('#overlay1').click(function() {    
/*This is where we specify what part of the page is gonna disable the 
scroll, in this case the body.*/
    $('body')   
        .css('overflow', 'hidden');
   });

/*Now we re-enable the scroll*/

/*This is where we specify the the part of the overlay that is being 
clicked to close it, in this case, the body and the .close, change at will.*/
$('body, .close').click(function() {
/*This is where we specify the part of the page we are re-enabling 
the scroll, in this case the body.*/
    $('body')
        .css('overflow', 'visible');
   });
});

Aquí hay un pequeño JSFiddle de mi script en acción.

1
Studocwho 18 sep. 2013 a las 09:31