fancybox2 / fancybox fait sauter la page en haut de la page

Question

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

Lorsque j'active la fancybox (en cliquant sur le lien, etc.), l'ensemble du code html se déplace derrière elle et s'affiche en haut. Cela fonctionne bien dans une autre démo, mais lorsque je fais glisser le même code vers ce projet, il se déplace vers le haut. Pas seulement avec les liens vers les divs en ligne, mais aussi pour la simple galerie d'images.

Quelqu'un a-t-il fait cette expérience ?

Answer 1

Cela peut en fait ê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/

Answer 2

Jordanj77 a raison mais la solution la plus simple est d'aller dans la feuille de style. jquery.fancybox.css et commentez la ligne en disant overflow: hidden !important; en section .fancybox-lock

Answer 3

Je réalise 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 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 de la bonne manière 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;  
    }

Answer 4

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 permettant de modifier ce comportement.

Vous pourriez supprimer cette section du code de la 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);
    }
}

Answer 5

Cela a également permis

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