jquery:当我在文档上附加一个层时，如何重置文档滚动条？

Question

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

例如，当你有一个很长的文档时，它就像 facebook 页面，你需要向下滚动才能看到较旧的图像/帖子，

当你点击照片时，滚动条发生了变化——从顶部开始，但文档页面根本不跳动，

关闭图片查看层后，滚动条恢复原样，但页面不跳转。

到目前为止，这是我的工作代码，但它并没有像我期望的那样像 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;
    });

有什么想法吗？

可以点这个link ，滚动并单击其中一张照片以了解我的意思。

Answer 1

Facebook 使用 css 属性:overflow

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

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

这将产生您想要的效果。