Esta es la solución más simple que obtuve hasta ahora. Y créeme, probé todos los demás y este es el más fácil. Funciona muy bien en dispositivos Windows , lo que empuja la página desde la derecha para tener espacio para la barra de desplazamiento del sistema y los dispositivos IOS que no requieren espacio para sus barras de desplazamiento en los navegadores. Por lo tanto, al usar esto, no necesitará agregar relleno a la derecha para que la página no parpadee cuando oculte el desbordamiento del cuerpo o html con css .
La solución es bastante simple si lo piensas. La idea es darle a window.scrollTop () la misma posición exacta en el momento en que se abre una ventana emergente. También cambie esa posición cuando la ventana cambie de tamaño (ya que la posición de desplazamiento cambia una vez que eso sucede).
Así que, aquí vamos...
Primero, creemos la variable que le permitirá saber que la ventana emergente está abierta y la llamaremos stopWindowScroll . Si no hacemos esto, obtendrá un error de una variable indefinida en su página y lo configurará en 0, como no activo.
$(document).ready(function(){
stopWindowScroll = 0;
});
Ahora hagamos que la función de ventana emergente abierta sea cualquier función en su código que active cualquier ventana emergente que esté usando como complemento o personalizada. En este caso, será una ventana emergente personalizada simple con un documento simple en función de clic.
$(document).on('click','.open-popup', function(){
// Saving the scroll position once opening the popup.
stopWindowScrollPosition = $(window).scrollTop();
// Setting the stopWindowScroll to 1 to know the popup is open.
stopWindowScroll = 1;
// Displaying your popup.
$('.your-popup').fadeIn(300);
});
Entonces, lo siguiente que hacemos es crear la función emergente de cierre, que repito nuevamente puede ser cualquier función que ya haya creado o esté utilizando en un complemento. Lo importante es que necesitamos esas 2 funciones para establecer la variable stopWindowScroll en 1 o 0 para saber cuándo está abierta o cerrada.
$(document).on('click','.open-popup', function(){
// Setting the stopWindowScroll to 0 to know the popup is closed.
stopWindowScroll = 0;
// Hiding your popup
$('.your-popup').fadeOut(300);
});
Luego, creemos la función window.scroll para que podamos evitar el desplazamiento una vez que stopWindowScroll mencionado anteriormente se establezca en 1, como activo.
$(window).scroll(function(){
if(stopWindowScroll == 1) {
// Giving the window scrollTop() function the position on which
// the popup was opened, this way it will stay in its place.
$(window).scrollTop(stopWindowScrollPosition);
}
});
Eso es. No se requiere CSS para que esto funcione, excepto sus propios estilos para la página. Esto funcionó a las mil maravillas para mí y espero que les ayude a usted y a los demás.
Aquí hay un ejemplo de trabajo en JSFiddle:
JS Fiddle Example
Hagame saber si esto fue de utilidad. Saludos.