Question

How can I reset the document scrollbar when I append a layer over the document?

For instance, it is like the facebook page when you have a very long document and you need to scroll down to see the older images/ posts,

When you click on the photos, the scrollbar has changed – it is started from the top, but the document page does not jump at all,

When you close the photo viewer layer, the scrollbar returns to as it was before, but the page does not jump.

This is my working code so far, but it does not work as I expect as the facebook’s.

$('.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;
    });

Any ideas?

You can click this link, scroll and click on one of the photos to see what I mean.

Answer 1

Facebook use the css property: overflow

The image container has the following css properties:

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

This will create the effect you are seeking.