如何防止固定div背后的内容滚动？

时间：2018-01-09 20:48:11

标签： javascript jquery html css lightbox

当此灯箱效果处于活动状态时，如何防止背景内容滚动？

我在overflow: hidden div上尝试了fixed，但它似乎并没有影响任何事情。

请参阅代码段以获取进一步参考。

＆＃13;
＆＃13; 
$('.pic > img').click(function() {
  var srcToCopy = $(this).attr('src');
  $('body').find('.imgsrc').attr('src', srcToCopy);
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

将body overflow设为hidden。我会这样做，使用close可以在单击关闭时轻松移除它。

$('.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>

相关问题
最新问题