jquery：当我在文档上添加图层时，如何重置文档滚动条？ [英] jquery: How can I reset the document scrollbar when I append a layer over the document?

问题描述

当我在文档上添加图层时，如何重置文档滚动条？

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

例如，当您拥有非常长的文档时，它就像Facebook页面您需要向下滚动才能看到较旧的图片/帖子，

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.

这是我的工作代码到目前为止，但它不工作，因为我期望作为Facebook的。

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;
    });

有任何想法吗？

这个链接，滚动并点击其中一张照片，看看我的意思。

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

推荐答案

Facebook使用css属性：溢出

Facebook use the css property: overflow

图像容器具有以下css属性：

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.

这篇关于jquery：当我在文档上添加图层时，如何重置文档滚动条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！