两个滚动条问题？

Question

在这个帖子上，我做了一个测试，但是我还是遇到了一些问题--当您单击显示图像时，页面上有两个滚动条。

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

怎样才能隐藏背景滚动条而不使页面跳变呢？

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

    });

这是测试页面。

编辑：

只是设法隐藏了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，以隐藏滚动条：

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

Answer 2

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

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

我不用卷轴就能看到背景。试试看。

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