jQuery simplemodal disable scrolling

Question

I have more than 2000 pixels scrolling content on a page.

If the user clicks a div a scrolling content pops up in a simplemodal window. Now my client wants

Answer 1

I found overflow:hidden not so nice since it hides the content behind the semi-transparant overlay if the page is scrolled halfway.

I came up with the following, rather elaborate solution. It disables scrolling in all possible detectable ways I found. And puts the scrollposition straight back to the old position if the page was still scrolled somehow.

var popupOpened = false;

function openPopup()
{
    popupOpened = true;

    //catch middle mouse click scrolling
    $(document).bind('mousedown',disableMiddleMouseButtonScrolling);

    //catch other kinds of scrolling
    $(document).bind('mousewheel DOMMouseScroll wheel',disableNormalScroll);

    //catch any other kind of scroll (though the event wont be canceled, the scrolling will be undone)
    //IE8 needs this to be 'window'!
    $(window).bind('scroll',disableNormalScroll);

    $("#layover").css({"opacity" : "0.7"}).fadeIn();
    $("#popup").fadeIn(300,function()
    {
        //use document here for crossbrowser scrolltop!
        oldScrollTop = $(document).scrollTop();
    });
}

function closePopup()
{
    popupOpened = false;
    $("#layover").fadeOut();
    $("#popup").fadeOut(300,function(){
        $(document).unbind('mousedown',disableMiddleMouseButtonScrolling);
        $(document).unbind('mousewheel DOMMouseScroll wheel',disableNormalScroll);
        $(window).unbind('scroll',disableNormalScroll);
    });
}

function disableMiddleMouseButtonScrolling(e)
{
    if(e.which == 2)
    {
        e.preventDefault();
    }
    return false;
}

function disableNormalScroll(e)
{
    e.preventDefault();
    $('html, body').scrollTop(oldScrollTop);
    return false;
}