Wie mache ich Lightbox Scroll aber nicht Hintergrund

Question

Ich versuche, eine Lightbox zu erstellen, um einige benutzerdefinierte Daten zu zeigen. Es gibt zwei Probleme, vor denen ich stehe, mit denen ich nicht umgehen kann.

1. Das erste Problem ist, dass ich die Seite nicht scrollen möchte (vertikal), wenn der Leuchtkasten sichtbar ist.

2. Das zweite Problem ist, ich möchte den Leuchtkasten scrollen, wenn der Inhalt größer als das Ansichtsfenster des Browsers ist.

Aber ich bin mir nicht sicher, wie ich das angehen soll. Ich habe versucht overflow-x:scroll; overflow-y:scroll;, aber es zeigt die Bildlaufleiste, aber nicht scrollen.

Es folgt der Code, den ich derzeit haben:

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