How to prevent content behind a fixed div from scrolling?

Question

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.

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

.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;
}

<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>

score 2 · Accepted Answer · answered Jan 09 '18 at 20:55

Set body overflow to hidden. I would do this using a close to easily remove it when close is clicked.

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

$('#customlightbox-controls').on('click', function(){
  $('body').removeClass('no-scroll');   
});

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

body.no-scroll {
  overflow: hidden
}

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

<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>

Yep, that did the trick. Thanks! – nr159 Jan 09 '18 at 21:22 — nr159, Jan 09 '18 at 21:22

How to prevent content behind a fixed div from scrolling?

1 Answers1