keep parent from scrolling #502

sweetman-zz opened this Issue Jan 28, 2013 · 5 comments


None yet
3 participants

Hi all,
I'm using Fancybox 2.1.4 and I have several customers that complains because the parent content will scroll when the use two fingers on their notebook touchpad to scroll content.
The same happens when you press the up/down arrows on the keyboard.
The parent doesn't scroll only when you use the mousewheel (only if you don't press the mousewheel button).
Is there a way to IMMOBILIZE the parent content while fancybox is open?


fancyapps commented Jan 28, 2013

If you have disabled the "locked" feature then the page scrolling might happen.

How can I enable it?
here is my code:

    fitToView   : false,
    type        : 'iframe',
    autoSize    : false,
    minWidth    : 800,
    minHeight   : 400,
    maxWidth    : 900,
    maxHeight   : 500,
    width       : '70%',
    height      : '70%',
    closeBtn    : true,
    closeClick  : false,
    scrolling   : 'auto',
    openEffect  : 'elastic',
    closeEffect : 'elastic',
    beforeShow: function(){
    afterClose: function(){
    helpers : {
       media: {},
    overlay : {
        opacity: 0.5,
        css : {
            'background-color' : '#000'

Thanks for any help.

overlay: {
    locked: true,   // if true, the content will be locked into overlay
    opacity: 0.5,
    css : {'background-color' : '#000'}

Just put "locked: true" inside your overlay-helper. That’s it.


fancyapps commented Jan 31, 2013

Maybe you mean mobile devices? If so, then you could do add this to "beforeShow" callback -

$('body').bind('touchmove.fb', function(e) {

and then remove that binding on "afterClose" callback.


fancyapps commented Feb 28, 2017

Hi, please, upgrade to v3.

@fancyapps fancyapps closed this Feb 28, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment