web-dev-qa-db-fra.com

fancybox v2 / fancybox provoque le saut de page vers le haut

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 lui - et va vers le haut. Cela fonctionne bien dans une autre démo, mais lorsque je fais glisser le même code dans ce projet, il saute au sommet. Non seulement avec les liens vers les divs en ligne, mais aussi pour la simple galerie d'images.

Quelqu'un at-il vécu cela?

jquerycssfancybox-2
103
sheriffderek

Cela peut être fait avec une aide dans Fancybox 2.

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

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

327
Dave Kiss

Jordanj77 est correct mais la solution la plus simple consiste simplement à aller à la feuille de style jquery.fancybox.css et commentez la ligne en disant overflow: hidden !important; dans la section .fancybox-lock

35
fast-reflexes

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

Comme Dave Kiss le fait remarquer, nous pouvons empêcher 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 boîte 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 le défilement temporairement?

    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;  
    }
14
Joeran

Le problème est que fancyBox modifie la valeur de dépassement du corps afin de masquer les barres de défilement du navigateur. Je ne pouvais pas trouver une option pour basculer 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);
    }
}
9
jordanj77

Malgré le fait que la solution appropriée à ce problème consiste à utiliser les options proposées par fancybox ( référez-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-le simplement à 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; masque la barre de défilement sur le <html> élément, ce qui provoque le "saut" de la page vers le haut. Afin de préserver la position de la barre de défilement, nous écrasons le débordement avec overflow: visible;

6
thexpand

Cela a également aidé

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

La réponse acceptée n’est pas complète car elle ne résout pas le problème mais elle l’évite! Voici une réponse plus complète qui vous donne 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'); 
            }
        });
1
Ian

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

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

Peut-être cette réponse tarde-t-elle, mais elle pourrait peut-être aider à l'avenir si, après avoir cliqué/fermé une image, fancybox faisait défiler votre site Web vers le haut, vous pouviez simplement supprimer le:

F.trigger('onReady');

ou mieux utiliser:

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

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

0
Nahomy Atias