Any way to stop the page BEHIND jquery tools overlay from scrolling?

I'm using jquery tools overlay and it's great. However, 开发者_如何学Pythonthe scrolling behavior is a little strange. If you open an overlay and put your mouse over it, you can still scroll the page behind it if you're at the top/bottom of the overlay.

Is there a way (preferably a jquery tools built in way) to prevent the page BEHIND the overlay from scrolling?

Not used jquery tools but when showing a ui dialog it is common to do the following to prevent the screen scrolling.

$("body").css("overflow", "hidden");

You could also add an event to the window scroll to prevent scrolling as this SO answer describes and also this article

Here you go:

$(function() {
        $("#element").overlay({
            mask: {
            color: '#000',
            loadSpeed: 200,
            opacity: 0.7
        },
        closeOnClick: true,
        onLoad: function () {
            $("body").css("overflow", "hidden");
        },
        onClose: function () {
            $("body").css("overflow", "");
        }
    });
});

Just had a look at this. You can't prevent the underlying page from scrolling, but you can prevent your OVERLAY from scrolling with it... after all that's what needs to be in focus right?

Try setting the CSS @media screen for your overlayed div as fixed .

.modal {
    //your other settings
    position:absolute !important;
}

Add this to the css to fix the modal window to the background. Should the modal window be larger than the screen, the whole page would of course be scrolled (including the modal window and the background).