fancybox2 / fancybox fait sauter la page en haut

105

J'ai implémenté fancybox2 sur un site de développement.

Lorsque j'engage la fancybox (cliquez sur le lien, etc.), tout le code HTML se déplace derrière - et va vers le haut. Je le fais fonctionner correctement dans une autre démo, mais lorsque je fais glisser le même code vers ce projet, il saute vers le haut. Non seulement avec les liens vers les divs en ligne, mais aussi pour une simple galerie d'images.

Quelqu'un a-t-il vécu cela?

jquery css fancybox-2

— shérifderek
source

Remarque: je viens de vérifier cela sur l'ipad et l'iphone et ce problème ne se produit pas ... mais il est dans Chrome et Firefox.

— sheriffderek

1

Si vous utilisez fancybox v2.1.5, il semble que le problème a été résolu dans le dernier master que vous pouvez télécharger ici github.com/fancyapps/fancyBox/archive/master.zip donc plus de hacks aux fichiers js ou css .

— JFK

331

Cela peut en fait être fait avec un assistant dans Fancybox 2.

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

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

— Dave Kiss
source

11

C'est certainement la façon de procéder. OP doit marquer ceci comme réponse acceptée. Merci pour ça!

— cfx

Entièrement d'accord. La réponse acceptée (pour supprimer le code de fancybox2) est un hack.

— Rob Gonzalez

C'est malheureux, la réponse acceptée n'a pas été modifiée en une année complète. J'espère que les futurs utilisateurs implémenteront cela et non la réponse "découper le code du plugin".

— AndyWarren

5

Je pense que cette réponse ne résout pas le problème. Beaucoup de gens peuvent ne pas aimer pouvoir faire défiler le contenu derrière fancybox (c'est ce qui se passera si lockedest défini sur false.) Il s'agit d'une solution de contournement temporaire à un problème qui peut en créer un autre pour certains scénarios. C'était un bogue et il a été corrigé dans le dernier master github.com/fancyapps/fancyBox/archive/master.zip

— JFK

1

@JFK Je suis d'accord que ce correctif n'est peut-être pas idéal à cause du défilement, mais je l'ai testé avec le dernier maître et la page saute toujours vers le haut. Il revient cependant à sa position d'origine lorsque Fancybox est fermé.

— Mr Jonny Wood

35

Jordanj77 est correct, mais la solution la plus simple consiste simplement à accéder à la feuille de style jquery.fancybox.csset à commenter la ligne en disant overflow: hidden !important;dans la section.fancybox-lock

— réflexes rapides
source

4

C'est mieux que d'utiliser helper car avec helper la page continue de défiler sous la superposition avec la molette de la souris. Commenter le débordement l'empêche de sauter, mais la barre de défilement est toujours verrouillée pour la page principale.

— Panama Jack

14

Je sais que c'est une vieille question, mais je pense avoir trouvé une bonne solution. Le problème est que la boîte fantaisie modifie la valeur de débordement du corps afin de masquer les barres de défilement du navigateur.

Comme le souligne Dave Kiss, nous pouvons empêcher Fancy Box de faire cela en ajoutant les paramètres suivants:

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

Mais, maintenant, nous pouvons faire défiler la page principale tout en regardant notre fenêtre de fantaisie. C'est mieux que de sauter en haut de la page, mais ce n'est probablement pas ce que nous voulons vraiment.

Nous pouvons empêcher le défilement dans le bon sens en ajoutant les paramètres suivants:

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

Et ajoutez ces fonctions de galambalaz. Voir: Comment désactiver temporairement le défilement?

    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
source

9

Le problème est que fancyBox modifie la valeur de débordement du corps afin de masquer les barres de défilement du navigateur. Je n'ai pas trouvé d'option pour activer ce comportement.

Vous pouvez supprimer cette section du code fancyBox pour l'empêcher:

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

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

— jordanj77
source

YAY! C'est aussi pourquoi ma page sautait de 20 pixels vers la gauche à l'époque. Merci! Vous avez résolu 2 de mes problèmes!

— sheriffderek

Les barres de défilement sont là ... mais j'utilise toujours overflow-y: scroll; de toute façon, c'est donc un compromis équitable pour moi.

— sheriffderek

Je suppose que cela bloquerait la fonctionnalité de la molette de la souris - je continuerai également à rechercher d'autres solutions. Mais comme je l'ai dit, cela fait l'affaire pour l'instant!

— sheriffderek

3

Si vous utilisez fancybox v2.1.5, il semble que le problème a été résolu dans le dernier master que vous pouvez télécharger ici github.com/fancyapps/fancyBox/archive/master.zip donc plus de hacks aux fichiers js ou css .

— JFK

1

C'était la meilleure réponse à l'époque ... et si, pour une raison quelconque, vous avez un ancien site ou quelque chose du genre, voyez cela comme une référence.

— sheriffderek

6

Malgré le fait que la bonne façon de résoudre ce problème passe par les options fournies par fancybox ( reportez-vous à cette réponse ), CSS pourrait être utilisé pour résoudre le problème. Il n'est pas nécessaire de modifier le fichier css de la bibliothèque, ajoutez simplement ceci à la feuille de style principale de l'application:

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

Le code réinitialise le débordement d'origine de l'élément. Le problème est que overflow: hidden;cache la barre de défilement sur l' <html>élément, ce qui fait «sauter» la page vers le haut. Afin de conserver la position de la barre de défilement, nous écrasons le débordement avecoverflow: visible;

— l'expansion
source

Une autre raison pour laquelle cela pourrait arriver est que le <body>ou / et le <html>peuvent avoirheight: 100%

— thexpand

4

Cela a également aidé

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

— hsobhy
source

1

L'écrasement des styles tiers n'est pas une bonne idée, surtout si vous devez utiliser un modificateur! Important pour briser la cascade. J'encourage tout le monde à utiliser le correctif fourni par Dave Kiss ci-dessus, pas celui-ci.

— Fabian Schöner du

1

La réponse acceptée n'est pas complète car elle ne résout pas réellement le problème, elle l'évite simplement! Voici une réponse plus complète qui vous donne réellement la fonctionnalité souhaitée tout en résolvant le problème de saut de fenêtre:

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

0

Peut-être que cette réponse est toujours tardive, mais peut-être qu'elle pourrait aider à l'avenir, si après avoir cliqué / fermé une image fancybox fait défiler votre site Web vers le haut, vous pouvez simplement supprimer le:

F.trigger('onReady');

ou mieux utiliser:

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

Dans la version fancyBox: 2.1.5 (ven, 14 juin 2013) cette partie du code se trouve à la ligne 897.

— Nahomy Atias
source

0

Vous pouvez effectivement coder comme ceci si vous utilisez la fonction par défaut de fancybox:

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

— Steele Rocky
source

-4

Je l'ai réparé avec:

overflow: hidden !important;

dans le .fancybox-lockcorps en jquery.fancybox.css. Et la barre de défilement ne saute pas :)

— user2684988
source

4

C'est ce que disait Fast-Reflexes il y a environ un mois.

— BoltClock