I have a lightbox and I want the webpage behind not to scroll on mouse wheel when that div is open, only the div content should remain scrollable. And when the div is gone, then the page can be scrollable again. But I'm stuck.
I can bind/unbind my window to the mousewheel but I can't figure out how to keep the lightbox scrollable when the window is not scrollable anymore.
I tried with e.stopPropagation but with no success so far. I tried many other examples here too but after a whole night searching, I just surrender on this one.
Here is the structure of my code:
When I scroll with mousewheel
{
if(no lightbox)
{
// Then the mousewheel scroll triggers some stuff
}
else
{
// the lightbox div is open and I then need to
// just keep the background static (no mousewheel scroll)
// and still allow the mousewheel to scroll inside the lightbox div
}
}
Here is my last attempt:
$(window).bind('mousewheel DOMMouseScroll', function(e)
{
if(!lightbox)
{
...
}
else
{
$(window).bind('mousewheel DOMMouseScroll',function(e)
{
e.preventDefault();
e.stopPropagation();
return false;
});
$('.lightbox').bind('mousewheel DOMMouseScroll',function()
{
return true;
});
}
}
This will not work because:
1) The lightbox div is embedded inside the window. The lightbox seems to get the properties of the window, mousewheel scroll included.
2) I have a window bind inside a window bind, which seems unreasonable.
3) I'm not sure "return false" is doing anything
Just FYI, I also tried something, which works, but it means that I simulate a scroll and there is a lag and a staircase effect. It doesn't seem natural at all and I don't want to go that way:
$(window).bind('mousewheel DOMMouseScroll', function(e)
{
if(!lightbox)
{
...
}
else
{
e.preventDefault();
e.stopPropagation();
$('.lightbox').bind('mousewheel DOMMouseScroll',function(){
var y = $('.lightbox').scrollTop();
$('.lightbox').scrollTop(y-15);
});
}
}
So, I don't know what else to try and could use a little help.
I have one requirement though (if you don't mind):
I should keep the structure as it is and add whatever I have to add whitin the "else" brackets. The reason is that the mousewheel event triggers many stuff and the project dynamic turns almost exclusively around that. So, it makes sense to use it as the main trigger.
Thank you.