JQuery: Как я могу сбросить полосу прокрутки документа, когда я добавляю слой поверх документа? - PullRequest
Новая
       38

JQuery: Как я могу сбросить полосу прокрутки документа, когда я добавляю слой поверх документа?

0 голосов
/ 04 сентября 2011

Как я могу сбросить полосу прокрутки документа, когда я добавляю слой поверх документа?

Например, это похоже на страницу facebook, когда у вас очень длинный документ, и вам нужно прокрутить вниз, чтобы увидетьстарые изображения / сообщения,

enter image description here

Когда вы нажимаете на фотографии, полоса прокрутки изменилась - она ​​запускается сверху, но страница документа вообще не переходит,

enter image description here

Когда вы закрываете слой просмотра фотографий, полоса прокрутки возвращается в прежнее состояние, но страница не переходит.

Это мой рабочий код, поэтомудалеко, но это не работает, как я ожидаю, как Facebook. 

$('.get-photo').click(function(){

        var object = $(this);
        var object_path = object.attr('href');
        //alert(object_path);

        $(document.body).append("<div class='background-photo'></div>");
        $(document.body).append('<div class="photos-holder"><img src="'+object_path+'" /></div>');

        var layer_background = $('.background-photo');
        var height_document = $(document).height();
        var scroll_top = $(window).scrollTop();

        layer_background.css({
            width:'100%',
            height:height_document + 'px',
            background: '#fff',
            opacity: 0.4,
            position:'absolute',
            top:0,
            left:0,
            zIndex:'100'
        });

        $('.photos-holder').css({
            width:'800px',
            height:'500px',
            background:'#ffffff',
            border:'1px solid #000',
            marginLeft:'-400px',
            position:'absolute',
            top: scroll_top + 100 + "px",
            left:'50%',
            zIndex:"101"
        });

        return false;
    });

Любые идеи?

Вы можете нажать на эту ссылку , прокрутите и нажмите на одну изфотографии, чтобы понять, что я имею в виду.

1 Ответ

0 голосов
/ 04 сентября 2011

Facebook использует свойство css: переполнение

Контейнер изображений имеет следующие свойства CSS: 

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: scroll;

Это создаст эффект, который вы ищете.

...