[fancybox 2] disable overlay scroll while fancybox is open

12,191 views
Skip to first unread message

sweetman

unread,
Oct 3, 2012, 7:02:33 AM10/3/12
to fanc...@googlegroups.com
Hi all,
I have a very long page containing links that trigger some fancyboxes.
All is (almost) fine. ;)
But while the fancybox is open the user is able to use the mousewheel to scroll the fancybox content AND the underlying page.
So, when the user closes the fancybox he will see another portion of the long page, not necessarily related to the click he used to trigger the fancybox.
I just tried to use this code inside the fancybox script:

        ...[snip]
 openEffect : 'elastic',
 'onStart' : function() {$("body").css({'overflow':'hidden'});},
 'onClosed' : function() {$("body").css({'overflow':'visible'});},
        closeEffect : 'elastic',
        ...[snip]

Is it possible to lock the underlying page so that it doesn't scroll at all while the fancybox is open?

TIA for any suggestion.

tony

JFK

unread,
Oct 3, 2012, 3:24:41 PM10/3/12
to fanc...@googlegroups.com
you have two options

1). upgrade to v2.1.0 ... which automatically adds class="fancybox-lock" to the <body> tag so you can't scroll the page behind fancybox

- or -

2). Add these callbacks:

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

onStart and onClosed are NOT valid callback options for fancybox v2.x but 1.3.x

sweetman

unread,
Oct 4, 2012, 4:04:32 AM10/4/12
to fanc...@googlegroups.com
Hi JFK, thanks for your reply it works.
Here is my code (in case anyone need the same help): in red is the code I added:

<script type="text/javascript">
$(document).ready(function() {

$(".various").fancybox({
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(){
$("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
  $("body").css({'overflow-y':'visible'});
},
helpers : {
  media: {},
        overlay : {
            opacity: 0.5,
            css : {
                'background-color' : '#000'
            }
        }
}
});
});
</script>

sweetman

unread,
Oct 4, 2012, 12:01:31 PM10/4/12
to fanc...@googlegroups.com
Hi JFK,
I just discovered that while the fancybox is open, the background doesn't scroll any more when you use the mousewheel. That's perfect.
But if you use the arrow keys on the keyboard the page scrolls.
Is there a way to disable the background page scrolling completely, while fancybox is open?

Thanks again for your help.

Tony


Il giorno mercoledì 3 ottobre 2012 21:24:41 UTC+2, JFK ha scritto:

sweetman

unread,
Oct 5, 2012, 3:21:05 AM10/5/12
to fanc...@googlegroups.com
Hi all,
I want to add some more info to replicate the problem. It' not only the keyboard arrows that scroll the page behind the open fancybox; it the middle click with middle mouse button ot clicking the mousewheel.

When the fancybox is open just click the mousewheel (ot the middle mouse button) and drag the mouse up or down. The page behind the fancybox will scroll. =(
I don't know if it's possible to disable the mousewheel click or similar action while your mouse is "hovering the overlay".

HTH

tony

sweetman

unread,
Oct 8, 2012, 4:27:38 AM10/8/12
to fanc...@googlegroups.com
Hi all,
I just discovered that this trick doesn't work on Macbook pro.
Macbook pro users use the trackpad to scroll the page using two fingers. while using the two fingers the page behind the fancybox scrolls.
I think this is the same as using the mousewheel.
Is there a way to inform the fancybox developer about it? perhaps he will be interested in including a fix in the next version.
I'm not registered in github, so I can't post there.

Any suggestion will be appreciated.

Thanks in advance.

And a big THANK to all volunteers.

tony

Manu Tessens

unread,
Mar 5, 2017, 8:17:56 PM3/5/17
to FancyBox
Thx for sharing the solution, needed this one!


Op donderdag 4 oktober 2012 10:04:32 UTC+2 schreef sweetman:
Reply all
Reply to author
Forward
0 new messages