web-dev-qa-db-fra.com

comment empêcher le défilement de la page derrière Fancybox-2

Nous utilisons fancybox2 pour afficher des images. Tout fonctionne bien, mais lorsque la plus grande image est affichée dans la fancybox, la page derrière défile vers le haut. Après la fermeture de la fancybox, l'utilisateur doit faire défiler vers le bas jusqu'à la position où il a ouvert la boîte. Les exemples sur le site fancybox2 n'indiquent pas ce comportement. Je ne pouvais pas savoir où est 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 en tant que module dans require.js . L'appel .fancybox () est dans un bloc $ (document) .ready.

Là où 2 barres de défilement et j'en ai caché une avec css

.fancybox-overlay {
overflow: hidden !important;
}
jqueryfancyboxfancybox-2
14
tomsteg

Apparemment, Fancybox modifie la propriété CSS overflow sur l'élément body en hidden lorsqu'une image est affichée. Cela fait revenir l'arrière-plan en arrière-plan. Tout ce que vous avez à faire est de commenter la ligne en indiquant overflow: hidden !important; dans la section .fancybox-lock dans la feuille de style jquery.fancybox.css.

Veuillez consulter fancybox2/fancybox amène la page à se placer en haut également.

21
fast-reflexes

Cela fonctionne bien pour moi:

Ajout des fonctions suivantes 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.

17
Avinash

Cela a fonctionné pour moi: 

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

J'espère que ça aide :)

4
SimCity

Mon deviner? Le sélecteur sur lequel vous cliquez pour déclencher une fantaisie est probablement une ancre avec une variable hashmark comme:

<a href="#">

alors vous obtenez la variable href de la boîte fantaisie à partir de l'élément <a> le plus proche, comme dans votre code:

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

Ici est une DEMO qui reproduit le comportement que vous décrivez (faites défiler le contenu jusqu'à ce que vous trouviez la vignette qui déclenche fancybox)

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

1). Changez la hashmark dans l'attribut href de votre ancre en la hashtag#nogo comme <a href="#nogo">

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

2) Ou remplacez la hashmark dans l'attribut href de votre ancre par javascript:; comme <a href="javascript:;">

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

3
JFK

Je me rends compte que cette question a été posée il y a quelque temps, mais je pense avoir trouvé une bonne solution à cette question. Le problème vient de ce que la boîte fantaisie change la valeur de dépassement du corps afin de masquer les barres de défilement du navigateur. 

Comme le fait remarquer SimCity, 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;  
    }
1
Joeran
$('.fancybox').fancybox({
 'beforeLoad': function(){
   disable_scroll();
    },
 'afterClose': function(){
   enable_scroll();
  }
});

var disabled_scroll = false;

function disable_scroll() {
  disabled_scroll = true;
}

function enable_scroll() {
  disabled_scroll = false;
}

dans fullPage.js

function scrollPage(element, callback, isMovementUp)
{
   if(disabled_scroll) return;
   .....
}
0
Alper Onur

Ma modification, ça m'aide

/* Fancybox */
$('.fancybox').fancybox({
    beforeShow: function(){
        $("body").css({
            "overflow-y": "hidden",
            "position": "fixed"
            }
        );
    },
    afterClose: function(){
        $("body").removeAttr("style");
    }
});
0
Maxim Smirnov

Vous pouvez essayer ceci: -

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

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

}

Il arrête le défilement vertical sur la page parent tant que fancybox est ouvert.

0
Ravindra Shekhawat

Dans jquery.fancybox.css -> .fancybox-lock 
changement: 
overflow: hidden !important; 
à: 
overflow: visible !important; 
travaille pour moi :)

0
Martin Filek