How to prevent content behind a fixed div from scrolling?

[admin]

How can I prevent the background content from scrolling when this lightbox effect is active?

I've tried

overflow: hidden

on the

fixed

div, but it didn't seem to affect anything.

See snippet for further reference.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override">

$('.pic > img').click(function() {
  var srcToCopy = $(this).attr('src');
  $('body').find('.imgsrc').attr('src', srcToCopy);
});

<pre class="snippet-code-css lang-css prettyprint-override">

.pic,
#imgsrc {
  display: inline-block;
}

img {
  width: 100px
}

a {
  display: inline-block;
  line-height: 0;
}

.container {
  display: inline;
  width: 100%;
  line-height: 0;
}

.text-container {
  display: block;
  width: 100%;
  line-height: 1;
}

.customlightbox {
  top: 0%;
  bottom: 0%;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -5;
  opacity: 0;
}

.customlightbox-imgwrap {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.customlightbox img {
  width: auto;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#customlightbox-controls {
  box-sizing: border-box;
  position: fixed;
  height: 50px;
  width: 50px;
  top: -50px;
  right: -3px;
  z-index: 5;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  opacity: .7;
}

#close-customlightbox {
  display: block;
  position: absolute;
  overflow: hidden;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#close-customlightbox:before {
  content: "";
  display: block;
  position: absolute;
  height: 0px;
  width: 2px;
  left: 14px;
  top: 0;
  background: white;
  border-radius: 2px;
}

#close-customlightbox:after {
  content: "";
  display: block;
  position: absolute;
  width: 0px;
  height: 2px;
  top: 14px;
  left: 0;
  background: white;
  border-radius: 2px;
}

.customlightbox:target {
  z-index: 4;
  opacity: 1;
  display: inline-block;
}

.customlightbox:target img {
  opacity: 1;
}

.customlightbox:target~#customlightbox-controls {
  top: -3px;
}

.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
  width: 30px;
}

.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
  height: 30px;
}

.lb-animate {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

<pre class="snippet-code-html lang-html prettyprint-override">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
Click on each of the images below to preview.
</div>

<br>

<!-- Lightbox Instance 1 -->
<div class="container">
  <a href="#view">
    <div class="pic">
      <img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
    </div>
  </a>

  <!-- Lightbox Instance 2 -->
  <div class="container">
    <a href="#view">
      <div class="pic">
        <img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
      </div>
    </a>

    <!-- Lightbox Instance 3 -->
    <div class="container">
      <a href="#view">
        <div class="pic">
          <img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
        </div>
      </a>
    </div>

    <!-- Lightbox Function -->
    <div class="customlightbox lb-animate" id="view">
      <div class="customlightbox-imgwrap">
        <img class="imgsrc" id="customlightbox-img" src="">
      </div>
    </div>
    <div id="customlightbox-controls" class="lb-animate">
      <a id="close-customlightbox" class="lb-animate" href="#!"></a>
    </div>

<div class="text-container">
<br>
Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text.
</div>

</div>
</div>