两个滚动条问题？

继续这篇文章 ，我做了一个测试，但是我仍然遇到了一些问题 – 当你点击显示图片时，页面有两个滚动条。

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

如何在不使页面跳跃的情况下隐藏背景滚动条？

css，

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

HTML，

 
Please scroll down until you see the click button
 


















 


















 


















 


















 


















 


















 click 


















 


















 


















 


















 
 
 
 
  

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

这是测试页面 。

编辑：

只是设法隐藏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'); 

Answer 1

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

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

Answer 2

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

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

我可以看到没有滚动的背景。 试试吧。

但在这种情况下，如果背景图像大于可见浏览器窗口 – 由于position:fixed您将永远无法看到整个图像