how to prevent scrolling of page behind fancybox-2

Question

We are using fancybox2 for displaying images. Everything works well, but when the larger image is displayed in the fancybox, the page behind scrolls to the top. After closin

Answer 1

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

in fullPage.js

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

Answer 2

My guess? The selector you click to fire fancybox is most likely an anchor with a hashmark like :

<a href="#">

then you get the fancybox's href from the closest <a> element, as in your code :

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

Here is a DEMO that reproduces the behavior you are describing (scroll the content down until you find the thumbnail that fires fancybox)

If what I assumed above is correct, then your possible solutions are :

1). Change the hashmark in your anchor's href attribute to the hashtag #nogo like <a href="#nogo">

as referred by Stuart Nicholls (cssplay) in his update of 15th March 2005 in the linked post.

2). Or replace the hashmark in your anchor's href attribute by javascript:; like <a href="javascript:;">

See updated JSFIDDLE using the first option.

Answer 3

You may try this :-

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

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

} 

It stops the vertical scrolling on the parent page while fancybox is open.