Question

不是网站，而是onClick图片事件。单击图像时，滚动条会调整到叠加图像的高度。

我如何使用jquery制作这样的东西？

Answer 1

当他们打开一个模态时，他们将以下类添加到正文

   .modal-open {
        overflow: hidden;
        position: relative;
    }

所以隐藏溢出，模态后面的所有图像都被隐藏了。因此滚动条适应模态的内容。

在模态层，他们添加了这个类

.modal-scrollable {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

注意auto是如何溢出的，这意味着滚动条将在该层上显示是否需要。

Answer 2

正如所承诺的，这是我所做的代码。

JQuery的：


    $('.item').on('click','img', function(){
        $this = $(this);
        $('body').addClass('modal_open');
        $('#overlay').fadeIn();
        $('#img_zoom').html('new and bigger image tag').fadeIn();
    });

CSS：

#overlay{z-index: 1; position: fixed; height: 100%; width:100%; background: rgba(255,255,255,0.3); display:none;}
#img_zoom{position: fixed; z-index: 2; box-shadow: 0 0 5px #000; display:none; bottom: 0; left: 0; overflow: auto; right: 0; top: 0;}

.modal_open {overflow: hidden; position: relative; }
.modal_scrollable {bottom: 0; left: 0; overflow: auto; position: fixed; right: 0; top: 0; }

全部归功于 ComputerArts

jquery调整滚动条大小以适应叠加div的高度

2 个答案: