Question

背景
我使用教程here创建了一个（HTML，CSS，JS）灯箱。当显示灯箱叠加div时（单击按钮时），我想停止滚动条功能。这样，当某人在页面上查看灯箱中的图像时，他们就无法滚动到页面的另一部分。然后，当灯箱关闭时，再次启用滚动条功能，以便它们可以自由滚动。我似乎无法找到正确的方法。

我试过了：

$(document).css('overflow-y', 'hidden');

但是当我将它添加到我的代码中时没有任何反应。好像我从来没有加过它。

问题：
有没有办法在灯箱启动时停止页面溢出功能，然后在关闭时重新启用它？

很抱歉，如果有一个简单的答案。我是JavaScript的新手。

使用Javascript：

function startLightBox() {
  var lbBg = document.getElementById("lightBoxBg");
  var lb = document.getElementById("lightBox");
  var screenTop = $(document).scrollTop();
  var currentMid = $(document).scrollTop() + 250;

  $('#lightBoxBg').css('top', screenTop);
  $('#lightBox').css('top', currentMid);

  lbBg.style.display = "block";
  lb.style.display = "block";
}

function dismiss() {
  var lbBg = document.getElementById("lightBoxBg");
  var lb = document.getElementById("lightBox");
  var screenTop = $(document).scrollTop();
  var currentMid = $(document).scrollTop() + 250;


  $('#lightBoxBg').css('top', screenTop);
  $('#lightBox').css('top', currentMid);
  lbBg.style.display = "none";
  lb.style.display = " none";
}

CSS：

#lightBoxBg {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0.5;
  display: none;
  background-color: #000000;
  height: 100%;
  width: 100%;
}

#lightBox {
  position: absolute;
  top: 50%;
  left: 40%;
  display: none;
}

HTML正文

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="col-lg-6">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/b6JnMZL3wGs" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">

        <button onclick="startLightBox()">Light Box</button>

      </div>

    </div>
  </div>

  <div id="lightBoxBg" onclick="dismiss()">

  </div>
  <div id="lightBox">
    <img src="test2.png" />
  </div>
</body>

Answer 1

试试这个 -

<强> jquery的

在$("body").css("overflow", "hidden");功能中使用startLightBox()。

在$("body").css("overflow", "auto");函数中使用dismiss()。

<强>的Javascript

使用

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only

在startLightBox()函数中。

并使用

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only

在dismiss()函数中。

Answer 2

您需要修改选择器html, body的溢出，而不能直接控制document css - document不是元素。

以下是一个例子：

＆＃13;

var toggled = false;
$('.visible').on('click', 'button', function() {
  toggled = !toggled;
  $(this).text((toggled ? 'Enable' : 'Disable') + ' scrolling');
  $('body, html').css('overflow', toggled ? 'hidden' : '');
});

＆＃13;

body {
  background-image: linear-gradient(to bottom, white, black);
  height: 140vh;
  position: relative;
}

.visible, .invisible {
  position: absolute;
  color: red;
}

.visible {
  top: calc(100vh - 2rem);
}

.invisible {
  top: calc(140vh - 2rem);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visible">Visible <button>Disable scrolling</button></div>
<div class="invisible">Invisible</div>

＆＃13;

停止和启动页面溢出/能够滚动单击

2 个答案: