两个滚动条的问题？

在这个post之后，我做了一个测试，但是我仍然遇到了一些问题 - 当你点击显示图像时，页面有两个滚动条。两个滚动条的问题？

当图像显示时，我不需要背景滚动条，我只需要图像容器上的滚动条。

如何隐藏背景滚动条而不使页面跳动？

的CSS，

#container-image { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow-x: auto; 
    overflow-y: scroll; 
    z-index:100; 
}

的HTML，

<p>Please scroll down until you see the click button</p> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<a href="#" class="get-photo">click</a> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 

<div id="container-image" style="display:none"> 
    <ul id="items-image"> 
     <li><img src="winnie-the-pooh-2011-4.jpg"/></li> 
    </ul> 
</div>

jquery的，

$(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; 
     }); 

    });

下面是测试page。

编辑：

只是设法隐藏body滚动条，它适用于所有的浏览器IE8接受 - 我怎么能修复IE？

$(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; 
     }); 

    });

编辑：

固定IE8：

$('body,html').css('overflow', 'hidden');

来源

2011-09-04 laukok

你的样品页有[193个验证错误（HTTP：//验证。 w3.org/check?uri=http%3A%2F%2Flauthiamkok.net%2Fdump%2Fposition.fixed%2F&charset=%28detect+automatically%29&doctype=Inline&group=0）。注意这些以及您跨浏览器一致性增加的机会。也考虑使用利润率或其他CSS定位而不是百万'
'。 – Sparky

在身上设置overflow: hidden在显示图像时，隐藏滚动条：

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

来源

2011-09-04 13:31:33 arnaud576875

明白了！非常感谢！ – laukok

只是设法隐藏身体滚动条，它适用于所有浏览器接受IE8 - 我如何解决IE浏览器？谢谢！ – laukok

把它修好了！谢谢。 – laukok

我刚刚在Firebug中删除了以下样式：

overflow-x: auto; 
overflow-y: scroll;

我可以看到没有滚动的背景。尝试一下。

但是，在这种情况下，如果背景图像比可见光的浏览器窗口更大 - 你永远可以看到整个图像，因为position:fixed

来源

2011-09-04 13:32:34 Samich

谢谢。请参阅我上面的编辑。 – laukok

两个滚动条的问题？

回答

相关问题