js/css : disable scrollbar but keep scroll position

Question

I'm using the Jquery dialog to open a popup box window on top of a page. When I open the dialog box, I want the general page scrolling to be disabled. To do so, I am doing :

$('body').css({overflow:'hidden'});

when the dialog opens, and:

$('body').css({overflow:'auto'});

when the dialog closes.

This works but when the scrollbar is being removed, the content in the back moves to the right and the result is not nice.

I tried another method, by creating a css class "noscroll", as such :

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

then, instead of the previous js code, I'm adding and removing this class to the body on dialog open/close.

Now this works for the scrollbar and the content in the back doesn't move to the right, but with this method the content in the back goes back to the top.

So basically method1 makes the content move to the right, and method2 makes the content move back to the top.

Does anyone know a solution for this? no scroll for the content in the back when the dialog opens, and no movement on disabling scrolling...?