js/css: desactivar la barra de desplazamiento, pero mantener la posición de desplazamiento

Question

Estoy usando el cuadro de diálogo de Jquery para abrir una ventana de cuadro emergente en la parte superior de la página. Cuando abro el cuadro de diálogo, quiero que se deshabilite el desplazamiento general de la página. para hacerlo, estoy haciendo:

$('body').css({overflow:'hidden'}); 

cuando se abre el cuadro de diálogo, y:

$('body').css({overflow:'auto'}); 

cuando se cierra el diálogo.

Esto funciona, pero cuando se quita la barra de desplazamiento, el contenido en la parte posterior se mueve hacia la derecha y el resultado no es bueno.

me trataron otro método, mediante la creación de una clase css "noscroll", tales como:

body.noscroll 
{ 
    position: fixed; 
    overflow-y: scroll; 
    width: 100%; 
} 

entonces, en lugar de la anterior código JS, estoy añadiendo y quitando esta clase para el cuerpo de diálogo abierto cerrado.

Ahora esto funciona para la barra de desplazamiento y el contenido en la parte posterior no se mueve hacia la derecha, pero con este método el contenido en la parte posterior vuelve a la parte superior.

Así que, básicamente, el método 1 hace que el contenido se mueva hacia la derecha, y method2 hace que el contenido vuelva a la parte superior.

¿Alguien sabe una solución para esto? no hay desplazamiento para el contenido en la parte posterior cuando se abre el cuadro de diálogo, y no hay movimiento al deshabilitar el desplazamiento ...?

Answer 1

He hecho un ejemplo bastante simple de mi solución.

http://jsfiddle.net/6eyJm/1/

Su emergente debe estar en una caja

<div id="shadow"> 
<div id="popup"> 
    <a id='close' href="#">Close</a> 
</div> 

a continuación, poner los CSS en la raíz de div

#shadow{ 
    display: none; 
    position: fixed; 
    top:0; 
    bottom: 0; 
    width: 100%; 
    height:100%; 
    background-color: rgba(0,0,0,0.6); 
} 

La posición fija es muy importante ya que no quiere ver el borde blanco, tomará el ancho completo de la ventana y no el cuerpo.

Luego está el pequeño truco JS

$('#open').click(function(e){ 
    e.preventDefault() 
    $('body').width($('body').width()); 
    $('body').css('overflow', 'hidden'); 
    $('#shadow').css('display', 'block'); 
}) 
$('#close').click(function(e){ 
    e.preventDefault() 
    $('body, #shadow').removeAttr('style') 
}) 

El objetivo aquí es tomar la anchura del cuerpo antes de quitar la barra de desplazamiento. Tu contenido no se moverá

Espero que ayude!

Lo siento por mi inglés, no por mi idioma nativo.

Answer 2

Recordar el desplazamiento debe mantener a raya a su ventana emergente;

JSfiddle

HTML

<div id="popupholder"> 
    <button id="close">Close me</button> 
</div> 


asd <br />asd <br />asd <br />asd <br />asd <br /> 
<button class="open">Popup</button> 
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br /> 
<button class="open">Popup</button> 
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br /> 
<button class="open">Popup</button> 
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd<br /> 
<button class="open">Popup</button> 
<br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br />asd <br /> 

CSS

html, body { 
    margin: 0px; 
} 

#popupholder { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: box; 
    display: -webkit-box; 
    display: -moz-box; 
    background-color: rgba(0,0,0,0.75); 
    display: none; 
} 

#close { 
    display: block; 
    height: 20px; 
    margin: 75px auto 0px auto; 
} 

JavaScript

$(document).ready(function() { 
    $('.open').click(function() { 
     // Block scrolling 
     $('body').css('overflow', 'hidden'); 

     // Show popup 
     var offset = window.pageYOffset; 
     //console.log(offset); 
     $('#popupholder').css({ 
      'display': 'block', 
      'top': offset + 'px' 
     }); 
    }); 

    $('#close').click(function() { 
     // Enable scrolling 
     $('body').css('overflow', 'auto'); 

     // Hide popup 
     $('#popupholder').css('display', 'none'); 
    }); 
}); 

Por razones de seguridad, podría agregar un muy alto z-index a su #popupholder, pero eso no es realmente relevante para la pregunta.

Answer 3

se puede calcular la diferencia entre el ancho del cuerpo, antes y después del desbordamiento oculta, y aplicarlo como padding-derecha al cuerpo

var bodyStartW = $("body").width(); 
$("body").css("overflow-y" , "hidden"); 
var bodyEndW = $("body").width(); 
var bodyMarginL = bodyEndW - bodyStartW; 
$("body").css("padding-right" , bodyMarginL); 

En Safari que tenían el mismo truco para el "html" etiqueta, y margen-derecha en lugar de relleno-derecha