如何使Lightbox滚动而不是背景

Question

我正在尝试创建一个灯箱来显示一些自定义数据。 我面临两个问题，我不知道如何处理。

1.第一个问题是当灯箱可见时，我不希望页面滚动（垂直）。

2.第二个问题是如果内容大于浏览器的视口，我希望灯箱滚动。

但我不知道如何处理这个问题。 我试过overflow-x:scroll; overflow-y:scroll; overflow-x:scroll; overflow-y:scroll; 但它显示滚动条但不滚动。

以下是我目前的代码：

HTML：

<div class="lightbox">
    <section class="image-app">
        <div class="app-bar">
            <div class="app-close">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </div>
        </div>
        <div class="container_fluid">
            <div class="row">
                <div class="col-md-8">
                    <div class="app-image">

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="side-bar">

                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

CSS：

.lightbox {
    display: none;
    position: fixed;
    background: rgba( 0, 0, 0, 0.7 );
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 1000;
}
.image-app {
    display: none;
    position: relative;
    background: #fafafa;
    top: 3%;
    left: 3%;
    width: 94%;
    min-height: 94%;
    overflow-x:scroll;
    overflow-y:scroll;
    border: #8e8e8e;
    z-index: 1001;
    padding: 10px;

    -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
}
.app-close {
    padding: 10px 10px;
    text-align: right;
    font-size: 150%;
    cursor: pointer;
}
.app-image {
    text-align: center;
    background: #ffffff;
}
.side-bar {
    position: relative;
    height: 100%;
    width: 100%;
}

Javascript：

    $ ( '.item' ).click( function ( event ) {

    event.preventDefault (  );
    event.stopPropagation (  );



    $( '.lightbox' ).show (  );
    $( '.image-app' ).slideToggle ( "fast" );

} );

Answer 1

if ($('.lightbox').css('display') != 'none') {
    $('body').on({'mousewheel': function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
})
}

var div = $(".lightbox").height();
var win = $(window).height();

if (div > win ) {
    $(".lightbox").css("overflow-x","scroll");
}