Cuando se activa un fancybox 2, una barra de desplazamiento parpadea en la página principal haciendo que el contenido se desplace hacia la izquierda y luego hacia atrás

¿Alguna idea sobre cómo solucionar el problema de la barra de desplazamiento? Cada vez que se activa una fancybox en mi sitio, crea una barra de desplazamiento mientras se inicializa y luego parpadea de nuevo, pero esto cambia toda la página durante una fracción de segundo. ¡No muy elegante!Cuando se activa un fancybox 2, una barra de desplazamiento parpadea en la página principal haciendo que el contenido se desplace hacia la izquierda y luego hacia atrás

¿Esto es un error con Fancybox 2?

código utilizado para activar FancyBox:

$('map > area.fancybox').click(function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     $.fancybox({ 
      'href' : url, 
      closeBtn : true, 
      width : '467', 
      height : '609', 
      fitToView : false, 
      padding : '5', 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
    });

Fuente

2012-03-29 JayDee

cuando haga clic para activar la barra de desplazamiento sólo tiene que añadir el siguiente código en el código de jQuery

$("body").css("overflow","hidden"); // hide body scrollbar

y cuando cerca la FancyBox añadir el siguiente código

$("body").css("overflow","auto"); // show body scrollbar

Fuente

2012-03-29 11:41:12

Buena solución, gracias. Es una lástima tener que modificar el CSS con una función para arreglar un error. – JayDee

No creo que sea un error (necesitaría proporcionar más elementos antes para hacer esa afirmación). Debería ser su propia configuración de CSS de la página (un elemento flotante por ejemplo) que cuando se agrega fancybox al 'cuerpo', puede crear un espacio extra en la altura del cuerpo para que aparezcan las barras de desplazamiento. Nunca he visto ese comportamiento, por lo que la solución anterior es muy específica. – JFK

Esto funciona para mí, porque tengo la propiedad 'overflow-y: scroll' en html/body como probablemente lo hizo OP, pero aún puede ver la desaparición de la 2nd scrollbar durante el efecto. Sería ideal nunca tenerlo aparecer en absoluto. http://jsfiddle.net/NVHWw/ – RCNeil

Asegúrate de que tu Fancybox no se inicialice dos veces. He sufrido años de dolor y cuando pensé que Fancybox 2 tenía errores con Windows AJAX, fue mi culpa haberlo inicializado varias veces.

Fuente

2012-07-05 02:28:19

¿Usas html { overflow-y: scroll; }? Esto choca con Fancybox. Fancybox agrega una clase a su body, llamada .fancybox-lock, que desplaza el contenido 17px a la derecha.

El script elimina las barras de desplazamiento del elemento "cuerpo" (aplicando la clase "fancybox-lock") y luego las compensa agregando margen para evitar el cambio de contenido.

Puede anular que de este modo:

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

Leer más: https://github.com/fancyapps/fancyBox/issues/340

Fuente

2012-08-27 12:53:53 Nix

esto es probablemente lo que estaba experimentando el PO, como yo mismo. Tenía 'overflow-y: scroll' configurado, por lo tanto, ¿por qué apareció dos veces? OMI, esta debería ser la respuesta correcta, ya que es muy probable que sea la causa raíz del problema y no debe pasarse por alto. – RCNeil

En caja de lujo 2 más tiempo muestra barra de desplazamiento, para evitar esto tenemos que establecer la altura y la anchura del cuerpo que necesite cargar en iframe,

es decir,

<body style="height:300px;width:200px;overflow:hidden"> 
//body content come here 
</body>

Este es un método, hay más formas de resolver este error.

Fuente

2012-09-25 11:07:37 shihabudheen

Editar el archivo jquery.fancybox.css en los siguientes lugares

.fancybox-lock { 
    overflow: hidden; 
}

convierte

.fancybox-lock { 
    overflow: hidden; 
    margin-right:0 !important; <-- Add this 
}

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: scroll; 
}

convierte

.fancybox-lock .fancybox-overlay { 
    overflow: auto; 
    overflow-y: auto; <-- 
}

Fuente

2012-10-02 16:47:09 ajaykarwal

Esto no soluciona el problema en Firefox. También lo INTRODUCE en Safari. – knorthfield

-1

En la versión: 2.1.1 elimino la línea entre la línea 1743 - 1749. Mala manera, sí, pero trabajo.^ _^

cambiar esta situación:

if (obj.fixed && !isTouch) { 
    if (obj.locked) { 
     this.el.addClass('fancybox-lock'); 
     if (this.margin !== false) { 
      $('body').css('margin-right', getScalar(this.margin) + obj.scrollbarWidth); 
     } 
    } 
} else { 
    this.update(); 
}

Para:

if (obj.fixed && !isTouch) { 

} else { 
    this.update(); 
}

Fuente

2012-10-09 10:57:02 user1634982

Sólo tiene que añadir a las opciones siguiente código:

helpers: { 
    overlay: { 
     locked: false 
    } 
}

Fuente

2013-02-14 17:48:47 pheonix

esta es la solución real – Ruben

imo, esta es la verdadera respuesta también. ¡no tenemos que modificar ninguno de los CSS subyacentes! +1 – Alex

esto funcionó para mí (las otras sugerencias no) – scientiffic

Sólo trate de añadir un margen. Me ayudó.

.fancybox-lock { 
    overflow: hidden !important; 
    width: auto; 
    margin-right: 20px; 
}

Fuente

2014-06-03 15:49:55

Cuando se activa un fancybox 2, una barra de desplazamiento parpadea en la página principal haciendo que el contenido se desplace hacia la izquierda y luego hacia atrás

Respuesta

Cuestiones relacionadas