fancybox2 / fancybox faz com que a página pule para o topo

105

Implementei o fancybox2 em um site de desenvolvimento.

Quando eu uso o fancybox (clique no link etc), todo o html muda para trás - e vai para o topo. Ele está funcionando bem em outra demonstração, mas quando arrasto o mesmo código para este projeto, ele salta para o topo. Não apenas com os links para divs inline, mas também para uma galeria de imagens simples.

Alguém já passou por isso?

jquery css fancybox-2 xerifederek
fonte
nota: Acabei de verificar isso no ipad e no iphone e esse problema não está ocorrendo ... porém é no chrome e no firefox.
sheriffderek
1
Se você estiver usando o fancybox v2.1.5, parece que o problema foi corrigido no último master que você pode baixar aqui github.com/fancyapps/fancyBox/archive/master.zip para que não haja mais hacks para os arquivos js ou css .
JFK de

Respostas:

331

Na verdade, isso pode ser feito com um ajudante no Fancybox 2.

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

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

Dave Kiss
fonte
11
Esta é definitivamente a maneira de fazer isso. OP deve marcar como resposta aceita. Obrigado por isso!
cfx
Concordo plenamente. A resposta aceita (remover o código do fancybox2) é um hack.
Rob Gonzalez,
É uma pena que a resposta aceita não tenha sido alterada em um ano inteiro. Espero que os futuros usuários implementem isso e não a resposta "cortar o código do plugin".
AndyWarren,
5
Acho que essa resposta não resolve o problema. Muitas pessoas podem não gostar de rolar o conteúdo atrás do fancybox (isso é o que acontecerá se lockedestiver definido como false.) Esta é uma solução temporária para um problema que pode criar outro para alguns cenários. Este era um bug e foi corrigido no último master github.com/fancyapps/fancyBox/archive/master.zip
JFK
1
@JFK Concordo que essa correção pode não ser ideal por causa da rolagem, mas eu testei com o mestre mais recente e a página ainda salta para o topo. Porém, ele volta à posição original quando o fancybox é fechado.
Sr. Jonny Wood
35

Jordanj77 está correto, mas a solução mais fácil é ir para a folha de estilo jquery.fancybox.csse comentar a linha dizendo overflow: hidden !important;na seção.fancybox-lock

reflexos rápidos
fonte
4
Isso é melhor do que usar o helper, porque com o helper a página continua a rolar abaixo da sobreposição com a roda do mouse. Comentar o estouro evita que ele salte, mas também a barra de rolagem ainda está bloqueada para a página principal.
Panama Jack
14

Sei que essa é uma questão antiga, mas acho que encontrei uma boa solução para ela. O problema é que a caixa extravagante altera o valor de estouro do corpo para ocultar as barras de rolagem do navegador.

Como Dave Kiss aponta, podemos impedir a caixa extravagante de fazer isso adicionando os seguintes parâmetros:

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

Mas, agora podemos rolar a página principal enquanto olhamos para nossa janela de caixa extravagante. É melhor do que pular para o topo da página, mas provavelmente não é o que realmente queremos.

Podemos evitar a rolagem da maneira certa adicionando os próximos parâmetros:

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

E adicione essas funções de galambalaz. Veja: Como desabilitar a rolagem temporariamente?

    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
fonte
9

O problema é que fancyBox altera o valor de estouro do corpo para ocultar as barras de rolagem do navegador. Não consegui encontrar uma opção para alternar esse comportamento.

Você pode remover esta seção do código fancyBox para evitá-lo:

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

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
Jordan77
fonte
YAY! Foi por isso também que minha página estava pulando 20 px para a esquerda. Obrigado! Você resolveu 2 dos meus problemas!
sheriffderek
As barras de rolagem estão lá ... mas eu sempre uso overflow-y: scroll; de qualquer forma, é uma troca justa para mim.
sheriffderek
Acho que isso bloquearia a funcionalidade da roda do mouse - continuarei procurando outras soluções também. Mas, como eu disse, isso está funcionando por enquanto!
sheriffderek
3
Se você estiver usando o fancybox v2.1.5, parece que o problema foi corrigido no último master que você pode baixar aqui github.com/fancyapps/fancyBox/archive/master.zip para que não haja mais hacks para os arquivos js ou css .
JFK de
1
Essa foi a melhor resposta na época ... e se por algum motivo você tem um site legado ou algo assim --- veja isso como uma referência.
sheriffderek de
6

Apesar do fato de que a maneira adequada de resolver esse problema é através das opções que o fancybox oferece ( consulte esta resposta ), CSS poderia ser usado para resolver o problema. Não há necessidade de editar o arquivo css da biblioteca, basta adicioná-lo à folha de estilo principal do aplicativo:

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

O código redefine o estouro original do elemento. O problema é que overflow: hidden;oculta a barra de rolagem no <html>elemento, o que faz com que a página "pule" para o topo. A fim de preservar a posição da barra de rolagem, substituímos o estouro comoverflow: visible;

thexpand
fonte
Outra razão pela qual isso poderia acontecer é porque o <body>ou / e o <html>pode terheight: 100%
expansão e
4

Isso também ajudou

.fancybox-lock body {
    overflow: visible !important;
}
hsobhy
fonte
1
Substituir estilos de terceiros não é uma boa ideia, especialmente se você tiver que usar um modificador! Important para interromper a cascata. Eu encorajo todos a usarem a correção fornecida por Dave Kiss acima, não esta.
Fabian Schöner,
1

A resposta aceita não é completa, pois na verdade não resolve o problema, apenas o evita! Aqui está uma resposta mais completa que realmente fornece a funcionalidade desejada enquanto corrige o problema de salto de janela: 

        $('.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
fonte
0

Talvez essa resposta esteja um pouco atrasada, mas talvez possa ajudar no futuro, se depois de clicar / fechar uma imagem chique de fazer seu site rolar para o topo, você poderia simplesmente excluir o:

F.trigger('onReady');

ou melhor usar: 

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

Na versão fancyBox: 2.1.5 (Sex, 14 de junho de 2013), essa parte do código está na linha 897.

Nahomy Atias
fonte
0

Você pode realmente codificar assim se estiver usando a função padrão do fancybox:

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

Eu consertei com:

overflow: hidden !important;

no .fancybox-lockcorpo em jquery.fancybox.css. E a barra de rolagem não pula :)

user2684988
fonte
4
Isso é o que fast-reflexes disse cerca de um mês atrás.
BoltClock