Jquery - Fancybox - Problema de desplazamiento de página de fondo

Question

Fancybox se carga bien y todo se abre como yo quiero, pero el problema ocurre en el fondo-- es visible (y molesto) que toda mi página cambia exactamente 8 píxeles hacia la derecha cuando la caja se carga y vuelve a la posición normal al cerrar la caja.

No puedo hacer un enlace al sitio ya que está en un servidor de desarrollo detrás del firewall de nuestra compañía.

Estoy usando los siguientes scripts: Fancybox, Quform y Jquery Banner Rotator. La llamada a la caja de lujo se está produciendo dentro del rotador. No he modificado ningún ancho/alto de la página original de jquery fancybox.

Tengo el ancho del cuerpo configurado en 100% y el margen establecido en automático, y los divs internos con un ancho mínimo de 1138px y el margen establecido en automático.

¿Alguien sabe dónde debo mirar para solucionar el problema?

Answer 1

Tuve el mismo problema recientemente. Encuentra .fancybox-lock en el CSS FancyBox, y cambiarlo a:

.fancybox-lock { 
    overflow: hidden; 
    margin: 0 !important; 
    } 

Voila! : D

Answer 2

Tuve una situación muy similar recientemente con Fancybox v2. Mi página inicial tenía contenido debajo del doblez y, por lo tanto, tenía una barra de desplazamiento (quizás el OP también lo hizo, no está claro). Disparar el enlace Fancybox causó el mismo cambio en el cuerpo de la página y borrar la barra de desplazamiento; al cerrar la imagen de Fancybox, se desplazó el cuerpo hacia atrás y se volvió a habilitar la barra de desplazamiento.

Los ajustes a .fancybox-lock no funcionó para mí, pero lo que hizo fue incluido en la siguiente opción cuando una instancia de mi objeto FancyBox:

helpers: { 
    overlay: { 
     locked: false 
    } 
} 

La única salvedad es que esto no bloquear su FancyBox al centro de la página si tenía desplazamiento, es decir, la página con vista Fancybox es completamente desplazable. Para mí, fue el menor de dos males.

Answer 3

En la versión 2.1.3, comente las líneas 1802-1807 (abajo) en jquery.fancybox.js.

if (!this.overlay) { 

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false; 

this.el  = document.all && !document.querySelector ? $('html') : $('body'); 

this.create(opts); 

} 

Answer 4

imagen de fondo centrada que utilizan FancyBox v.2.1.4 con un fija, para el cuerpo, y obligando a la barra de desplazamiento vertical mostrando siempre.

body{ 
    background: url('../img/sfondo.jpg') fixed center top; 
    overflow-y: scroll; 
} 

A pesar de haber obligado a la visualización de la barra de desplazamiento, que tenían el problema de desplazamiento Imagen de fondo con Firefox en Mac (Chrome y Safari estaban bien desde las barras de desplazamiento león no tienen espacio dentro de la página) y es decir, ff, cromo en windows.

me he dado cuenta de que si fijo manualmente los desplazamiento x lugar del mundo centro en la propiedad de fondo el problema se ha ido, por lo que lograron con un poco de jQuery en la cabeza de la página:

<script> 
    function centerTheBackground(){ 
     var pageWidth = $(window).width(); 
     var imageWidth = 1920; //set here the width of the background image 
     var xOffset = (imageWidth/2) - (pageWidth/2); 
     jQuery('body').css('background-position', '-' + xOffset + "px top"); 
    } 


    jQuery(function($){ 
     centerTheBackground(); 
    }); 


    $(window).resize(function() { 
     centerTheBackground(); //re-center the background image during window resizing 
    });    
</script> 

Answer 5

acabo lo resolvió mediante la adición de "margin-right: auto importante" al elemento del cuerpo :) Este sobre normas Fancyboxes propio margen derecha: 0.

Answer 6

Es un problema conocido, aquí se puede encontrar más información: issues, fancyapps @ GitHub

estoy usando fancybox2 (versión 2.1.5). he resuelto el problema modificando ligeramente el 'jquery.fancybox.css'-archivo:

encontrar el' sección helper' Overlay (comienza en la línea 165) y cambiar dos reglas:

.fancybox-lock { 
/* overflow: hidden !important;*/ 
    overflow-x: hidden !important; 
    overflow-y: scroll !important; 
    width: auto; 
} 

y la segunda regla:

.fancybox-lock .fancybox-overlay { 
/* overflow: auto; 
    overflow-y: scroll;*/ 
    overflow: hidden !important; 
} 

Esto funciona bien suficiente (en mi humilde opinión), aunque la página es desplazable detrás de la superposición.

Al menos se suprime el perturbador efecto de "desplazamiento a la derecha".

Descubrí más tarde que los elementos que se posicionaron con "a la derecha: 0"; fueron desplazados a la izquierda por el ancho de la barra de desplazamiento vertical.

Esto se debe a un margen-derecho establecido por el código fancybox.js-code añadiendo un estilo-nodo dentro del elemento-cabeza.

Para solucionar el problema, simplemente modifique una sola línea de código dentro del archivo jquery.fancybox.js o el archivo jquery.fancybox-2.1.5-pack.js, dependiendo de cuál esté utilizando.

en la línea 2017 de la versión expandida:

$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head"); 

// change it to 

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head"); 

// perhaps comment out the complete line, I haven't testet it though 

o en el .Pack-archivo (línea 46 cerca de EOL):

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery); 

// change it to: 

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery); 

// or try to remove the "f().appendTo()"-part completely (untested) 

Answer 7

Bueno acabo comentaron la siguiente línea en CSS FancyBox

/*.fancybox-lock { 
    overflow: hidden; 
} 
*/ 

y comenzó a funcionar bien en:

• FancyBox - jQuery Plugin
• versión: 2.1.4 (Jue 10 Ene 2013)

Answer 8

Puede desactivar la función de bloqueo:

$(".fancybox").fancybox({ 
    helpers : { 
     overlay : { 
      locked : false 
     } 
    } 
}); 

a mí me funcionó.

Answer 9

Esto lo hizo por mí ...

.fancybox-lock { 
     overflow: hidden !important; 
     padding-right: 17px; 
} 

.fancybox-lock body { 
    overflow: hidden !important; 
} 

Answer 10

Usted está frente a ese problema para barra de desplazamiento! simplemente trace el ancho de la barra de desplazamiento y use ese ancho como '.fancybox-lock' margin-right '. por ejemplo,

.fancybox-lock{ 
     margin-right: [your calculated width] !important; 
} 

Esto va a resolver su problema de seguridad, porque también tuve ese problema de una vez.

Answer 11

Si su problema son los elementos fijos que saltan cuando se abre Fancybox, simplemente agregue un relleno a la derecha: 17px a esos elementos en su CSS, contenidos en la clase .fancybox-lock.

Answer 12

Estoy usando la caja de fantasía 3 y tuve el mismo problema porque mi envoltura principal era absoluta.

asegúrate de que la envoltura no lo esté y debería funcionar bien.