title: Two scrollbars problems?
body: <p>Following up on this <a href="https://stackoverflow.com/questions/7297211/jquery-how-can-i-reset-the-document-scrollbar-when-i-append-a-layer-over-the-doc">post</a>, I made a test, but I still got a bit of problem - the page has two scroll bars when you click to display the image.</p>
  
  <p>I don't need the background scrollbar when the image is being displayed, I only need the scrollbar on the image container.</p>
  
  <p>How can I hide the background scrollbar without making the page jumpy?</p>
  
  <p>the css,</p>
  
  <pre><code>#container-image {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow-x: auto;
      overflow-y: scroll;
      z-index:100;
  }
  </code></pre>
  
  <p>the html,</p>
  
  <pre><code>&lt;p&gt;Please scroll down until you see the click button&lt;/p&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;a href="#" class="get-photo"&gt;click&lt;/a&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;div id="container-image" style="display:none"&gt;
      &lt;ul id="items-image"&gt;
          &lt;li&gt;&lt;img src="winnie-the-pooh-2011-4.jpg"/&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the jquery,</p>
  
  <pre><code>$(document).ready(function(){
          $('.get-photo').click(function(){
  
              var object = $(this);
              var object_path = object.attr('href');
              var scroll_top = $(window).scrollTop();
              //alert(object_path);
              $('#container-image').show();
              return false;
          });
  
      });
  </code></pre>
  
  <p>Here is the test <a href="http://lauthiamkok.net/dump/position.fixed/" rel="nofollow noreferrer">page</a>.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Just managed to hide the <code>body</code> scrollbar and it works on all browsers accept IE8 - how can I fix IE??</p>
  
  <pre><code>$(document).ready(function(){
          $('.get-photo').click(function(){
              $('body').css('overflow', 'hidden');
              var object = $(this);
              var object_path = object.attr('href');
              var scroll_top = $(window).scrollTop();
              var height_document = $(document).height();
              //alert(object_path);
  
              $('#background-photo').css({
  
                  height:height_document + 'px',
                  display:'block'
  
              });
  
              $('#container-image').show();
              return false;
          });
  
          $('#items-image img').click(function(){
  
              var object = $(this);
              $('body').css('overflow', 'auto');
              $('#container-image').hide();
              $('#background-photo').hide();
              return false;
          });
  
      });
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Fixed IE8:</p>
  
  <pre><code>$('body,html').css('overflow', 'hidden');
  </code></pre>