Hiding scrollbar without affecting page width or shaky page re-rendering

Question

I have a div with position fixed (my dialog) which i give a higher z-index to takeover my page when a certain action is performed. Am trying to hide my scrollbar by doing overflow:hidden;without affecting the width of the page when the div takes over the page. Any suggestion how this would be performed??

html, body {
background: #FFFFFF;
font-family: "Avenir Medium";
height: 100%;
transition: overflow 0.37s easein-out
}

.div-dialog{
display: none;
opacity: 0;
position: fixed;
width: 0;
left: 0;
top: 0;
z-index: 0;
overflow: hidden;
background: white;
-webkit-transition: opacity 0.30s ease-in-out;
transition: opacity 0.30s easein-out;
}

Jfiddle trying to replicate my result.The implementation am trying to realize is that of myspace when you click the search icon at the top left

Answer 1

Was finally able to fix my problem, by doing the following

    html,body{
     height: 100%;
     overflow: hidden;
    }
    body{
     overflow: auto;
    }

By doing this all my content stays within the body, so when an element has a position of fixed, it covers the scrollbar and its not affected by any change to its overflow,overflow:hidden or overflow:auto