Проблемы с двумя полосами прокрутки?

После этого 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;
        });

    });

Вот тестовая страница.

ИЗМЕНИТЬ:

Просто удалось скрыть полосу прокрутки 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');

person laukok    schedule 04.09.2011    source источник
comment
На вашей тестовой странице есть 193 ошибки проверки. Позаботьтесь об этом, и ваши шансы на согласованность в разных браузерах увеличатся. Также рассмотрите возможность использования полей или другого позиционирования CSS вместо миллиона <br/>.   -  person Sparky    schedule 04.09.2011


Ответы (2)


Установите overflow: hidden на теле во время отображения изображения, чтобы скрыть полосы прокрутки:

$('body').css('overflow', 'hidden');
person Arnaud Le Blanc    schedule 04.09.2011
comment
Просто удалось скрыть полосу прокрутки тела, и она работает во всех браузерах, принимающих IE8 - как я могу исправить IE? Спасибо! - person laukok; 04.09.2011

Я только что удалил в Firebug следующие стили:

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

и я могу видеть фон без прокрутки. Попытайся.

Но в этом случае, если фоновое изображение больше видимого окна браузера - вы никогда не сможете увидеть изображение целиком из-за position:fixed

person Samich    schedule 04.09.2011