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

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 2

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 3

My modification, this help me

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

Answer 4

This worked for me :

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

Hope it helps :)

Answer 5

I realize this question has been asked a while ago, but I think I have found a good solution for it. The problem is that fancy box changes the overflow value of the body in order to hide the browser scrollbars.

As SimCity points out, we can stop fancy box from doing this by adding the following parameters:

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

But, now we can scroll the main page while looking at our fancy box window. It is better than jumping to the top of the page, but it is probably not what we really want.

We can prevent scrolling the right way by adding the next parameters:

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

And add these functions from galambalaz. See: How to disable scrolling temporarily?

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

Answer 6

In jquery.fancybox.css -> .fancybox-lock
change:
overflow: hidden !important;
to:
overflow: visible !important;
works for me :)