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

Vous pouvez essayer ceci :-

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

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

} 

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

Answer 2

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

Answer 3

Mes modifications, cela m'aide

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

Answer 4

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