两个滚动条问题?

时间:2011-09-04 13:26:49

标签: jquery css onclick position

跟进这个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');

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

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

但在这种情况下,如果背景图片大于可见浏览器窗口 - 由于position:fixed

,您将永远无法看到整个图像