Comment empêcher le défilement de la page derrière fancybox-2

Question

Nous utilisons fancybox2 pour afficher des images. Tout fonctionne bien, mais lorsque l'image plus grande est affichée dans la fancybox, la page derrière défile vers le haut. Après avoir fermé la fancybox, l'utilisateur doit de nouveau dérouler vers le bas jusqu'à la position où il a ouvert la boîte. Les exemples sur le site fancybox2 ne montrent pas ce comportement. Je n'ai pas pu trouver où se trouve la différence pour que cela se produise.

fancyOptions = {
  type: 'image',
  closeBtn: false,
  autoSize: false,
  scrolling: 'no',
  type: 'image',
  padding: [10,10,10,10],  
  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  },
  helpers: {
    overlay: {
      css: {
        'background': 'rgba(0, 0, 0, 0.7)'
      },
    },
    title: {
      type: 'inside'
    }
  }
};

Nous utilisons fancybox2 comme un module au sein de require.js. L'appel .fancybox() est dans un bloc $(document).ready.

Il y avait 2 barres de défilement et j'en ai caché une avec du css

.fancybox-overlay {
overflow: hidden !important;
}

Answer 1

Apparemment, Fancybox modifie la propriété CSS overflow sur l'élément body en hidden lorsqu'une image est affichée. Cela provoque le défilement de l'arrière-plan vers le haut. Il vous suffit de commenter la ligne disant overflow: hidden !important; dans la section .fancybox-lock de la feuille de style jquery.fancybox.css.

Veuillez consulter fancybox2 / fancybox causes page to to jump to the top également.

Answer 2

Cela fonctionne bien pour moi :

Ajoutez les fonctions de suivi dans l'initialisation de facnybox

beforeShow: function(){
    $("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("body").css({'overflow-y':'visible'});
}

Exemple :

$(".fancyBoxTrigger").fancybox({
    maxWidth    : 820,
    maxHeight   : 670,
    fitToView   : false,
    width       : 760,
    height      : 580,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    padding     : 10,
    closeBtn    : false,
    beforeShow: function(){
        $("body").css({'overflow-y':'hidden'});
    },
    afterClose: function(){
        $("body").css({'overflow-y':'visible'});
    },
    helpers : {
        overlay : {
            opacity: 0.4,
            locked: false
        }
    }
});

J'espère que cela fonctionnera pour vous.

Answer 3

Cela a fonctionné pour moi :

$.fancybox({
        scrolling   : 'hidden',
        helpers: {
            overlay: {
              locked: true 
            }
        });

J'espère que cela aide :)

Answer 4

Ma supposition? Le sélecteur sur lequel vous cliquez pour déclencher fancybox est très probablement une ancre avec un dièse comme :

ensuite, vous obtenez le href de fancybox à partir de l'élément le plus proche, comme dans votre code :

beforeLoad: function(){ this.title = getTitle(this); this.href = $(this.element).closest('a').attr('href'); }

Voici une DEMO qui reproduit le comportement que vous décrivez (faites défiler le contenu jusqu'à trouver la vignette qui déclenche fancybox)

Si ce que j'ai supposé ci-dessus est correct, alors vos solutions possibles sont :

1). Changer le dièse dans l'attribut href de votre ancre en hashtag #nogo comme

comme indiqué par Stuart Nicholls (cssplay) dans sa mise à jour du 15 mars 2005 dans le post lié.

2). Ou remplacer le dièse dans l'attribut href de votre ancre par javascript:; comme

Voir JSFIDDLE mis à jour en utilisant la première option.

Answer 5

Je réalise que cette question a été posée il y a un certain temps, mais je pense avoir trouvé une bonne solution à cela. Le problème est que fancy box modifie la valeur de débordement du corps afin de masquer les barres de défilement du navigateur.

Comme SimCity le souligne, nous pouvons empêcher fancy box de le faire 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 fancy box. 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 ajouter 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;  
    }