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 closing the fancybox the user has to scroll back downwards to the position, where he opened the box. The examples on the fancybox2 Site do not show this behaviour. I could not find out, where is the difference to make this happen.

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'
    }
  }
};

We are using fancybox2 as a module within require.js. The .fancybox() call is in a $(document).ready block.

There where 2 scrollbars and I hid one with css

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

Answer 1

Apparently, Fancybox changes the CSS property overflow on body element to hidden when a picture is showed. This causes the background to scroll back to the top. All you have to do is comment out the row saying overflow: hidden !important; in section .fancybox-lock in stylesheet jquery.fancybox.css.

Please see fancybox2 / fancybox causes page to to jump to the top as well.

Answer 2

This is working fine for me:

Add follow functions in facnybox initialization

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

Example:

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

I hope it will work for you.

Answer 3

This worked for me :

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

Hope it helps :)