开发者

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

开发者 https://www.devze.com 2023-04-02 01:46 出处:网络
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 ol

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,

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

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,

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

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 cli开发者_高级运维ck this link, scroll and click on one of the photos to see what I mean.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号