fancybox2 / fancybox hace que la página salte a la parte superior

105

He implementado fancybox2 en un sitio de desarrollo.

Cuando enciendo el fancybox (haga clic en el enlace, etc.), todo el html se desplaza detrás de él y va a la parte superior. Lo tengo funcionando bien en otra demostración, pero cuando arrastro el mismo código a este proyecto, salta a la parte superior. No solo con los enlaces a divs en línea, sino también para una galería de imágenes simple.

Alguien ha experimentado esto?

jquery css fancybox-2

— Sheriffderek
fuente

nota: acabo de comprobar esto en el ipad y el iphone y este problema no se produce ... sin embargo, está en Chrome y Firefox.

— sheriffderek

1

Si está utilizando fancybox v2.1.5, parece que el problema se ha solucionado en el último maestro que puede descargar desde aquí github.com/fancyapps/fancyBox/archive/master.zip, por lo que no más hackeos a los archivos js o css .

— JFK

331

En realidad, esto se puede hacer con un ayudante en Fancybox 2.

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

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

— Dave Kiss
fuente

11

Definitivamente esta es la forma de hacerlo. OP debe marcar esto como respuesta aceptada. ¡Gracias por esto!

— cfx

Totalmente de acuerdo. La respuesta aceptada (para eliminar el código de fancybox2) es un truco.

— Rob Gonzalez

Es lamentable que la respuesta aceptada no haya cambiado en un año completo. Espero que los futuros usuarios implementen esto y no la respuesta de "cortar el código del complemento".

— AndyWarren

5

Creo que esta respuesta no resuelve el problema. Es posible que a muchas personas no les guste poder desplazarse por el contenido detrás de fancybox (esto es lo que sucederá si lockedestá configurado en false). Esta es una solución temporal a un problema que puede crear otro en algunos escenarios. Esto fue un error y se ha corregido en el último master github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK Estoy de acuerdo en que esta solución puede no ser realmente ideal debido al desplazamiento, pero la he probado con el último maestro y la página todavía salta a la parte superior. Sin embargo, vuelve a la posición original cuando Fancybox está cerrado.

— Mr Jonny Wood

35

Jordanj77 es correcto, pero la solución más fácil es ir a la hoja de estilo jquery.fancybox.cssy comentar la fila que dice overflow: hidden !important;en la sección.fancybox-lock

— reflejos rápidos
fuente

4

Esto es mejor que usar helper porque con helper la página continúa desplazándose por debajo de la superposición con la rueda del mouse. Comentar el desbordamiento evita que salte, pero también la barra de desplazamiento sigue bloqueada para la página principal.

— Panama Jack

14

Me doy cuenta de que esta es una pregunta antigua, pero creo que he encontrado una buena solución. El problema es que el cuadro elegante cambia el valor de desbordamiento del cuerpo para ocultar las barras de desplazamiento del navegador.

Como señala Dave Kiss, podemos evitar que la caja elegante haga esto agregando los siguientes parámetros:

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

Pero ahora podemos desplazarnos por la página principal mientras miramos nuestra elegante ventana de caja. Es mejor que saltar al principio de la página, pero probablemente no sea lo que realmente queremos.

Podemos evitar el desplazamiento de la manera correcta agregando los siguientes parámetros:

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

Y agregue estas funciones de galambalaz. Consulte: ¿Cómo deshabilitar el desplazamiento temporalmente?

    var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }

— Joeran
fuente

9

El problema es que fancyBox cambia el valor de desbordamiento del cuerpo para ocultar las barras de desplazamiento del navegador. No pude encontrar una opción para alternar este comportamiento.

Puede eliminar esta sección del código fancyBox para evitarlo:

if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}

— jordanj77
fuente

¡HURRA! Por eso también mi página saltaba 20px hacia la izquierda en ese momento. ¡Gracias! ¡Resolviste 2 de mis problemas!

— Sheriffderek

Las barras de desplazamiento están ahí ... pero yo siempre uso overflow-y: scroll; de todos modos, es una compensación justa para mí.

— Sheriffderek

Supongo que eso bloquearía la funcionalidad de la rueda del mouse; continuaré buscando otras soluciones también. Pero como dije, ¡esto está funcionando por ahora!

— Sheriffderek

3

Si está utilizando fancybox v2.1.5, parece que el problema se ha solucionado en el último maestro que puede descargar desde aquí github.com/fancyapps/fancyBox/archive/master.zip, por lo que no más hackeos a los archivos js o css .

— JFK

1

Esta fue la mejor respuesta en ese momento ... y si por alguna razón tiene un sitio heredado o algo así, vea esto como una referencia.

— sheriffderek

6

A pesar de que la forma correcta de resolver este problema es a través de las opciones que proporciona fancybox ( consulte esta respuesta ), CSS podría usarse para resolver el problema. No es necesario editar el archivo css de la biblioteca, solo agréguelo a la hoja de estilo principal de la aplicación:

html.fancybox-lock {
    overflow: visible !important;
}

El código restablece el desbordamiento original del elemento. El problema es que overflow: hidden;oculta la barra de desplazamiento del <html>elemento, lo que provoca que la página "salte" a la parte superior. Para preservar la posición de la barra de desplazamiento, sobrescribimos el desbordamiento conoverflow: visible;

— theexpand
fuente

Otra razón por la que esto podría suceder es porque el <body>o y el <html>pueden tenerheight: 100%

— 2015

4

Esto también ayudó

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

— hsobhy
fuente

1

Sobrescribir estilos de terceros no es una buena idea, especialmente si tiene que usar un modificador importante para romper la cascada. Animo a todos a que utilicen la solución proporcionada por Dave Kiss, no esta.

— Fabian Schöner

1

La respuesta aceptada no está completa ya que en realidad no resuelve el problema, ¡simplemente lo evita! Aquí hay una respuesta más completa que realmente le brinda la funcionalidad deseada mientras soluciona el problema de salto de ventana:

        $('.fancybox').fancybox({
            helpers: {
                overlay: {
                    locked: false
                }
            },
            beforeShow:function(){ 
                $('html').css('overflowX', 'visible'); 
                $('body').css('overflowY', 'hidden'); 
            },
            afterClose:function(){ 
                $('html').css('overflowX', 'hidden');
                $('body').css('overflowY', 'visible'); 
            }
        });

— Ian
fuente

0

Tal vez esta respuesta sea siempre tardía, pero tal vez podría ayudar en el futuro, si después de hacer clic / cerrar una imagen, fancybox hace que su sitio web se desplace hacia la parte superior, simplemente puede eliminar:

F.trigger('onReady');

o mejor uso:

/*F.trigger('onReady');*/

En la versión de fancyBox: 2.1.5 (viernes 14 de junio de 2013), esa parte del código está en la línea 897.

— Nahomy Atias
fuente

0

En realidad, puede codificar así si está utilizando la función predeterminada de fancybox:

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });

— Steele Rocky
fuente

-4

Lo arreglé con:

overflow: hidden !important;

en .fancybox-lockcuerpo en jquery.fancybox.css. Y la barra de desplazamiento no salta :)

— user2684988
fuente

4

Eso es lo que dijeron los reflejos rápidos hace un mes.

— BoltClock