Question

When I have a scrollbar on my page and I apply overflow:hidden, it hides the scrollbar, but the page moves to the side by a few pixels. I would like it to stay intact. I tried to apply position:absolute and left:10px, but it didn’t work.

Any ideas on how to make it stay intact?

basically, all of this is done for the modal dialogs to appear with the main page content including scrollbars locked so the user can only scroll the modal dialog.

the browser I try this in is older IE versions and the code for opening the dialog is this:

 if ((ua.msie && ua.version.slice(0, 3) == "7.0") || (ua.msie && ua.version.slice(0, 3) == "6.0")) {
    $('body').css('overflow', 'hidden');
    $('html').css('overflow-y', 'hidden');
}

Everything works perfect except that the page content moves to the right side a little bit when the scrollbar gets hidden.

Answer 1

Try to add some padding to the body or the main content div.

Something like

body{
    padding-right:10px;
}