Question

我知道这个问题已被多次询问和回答。但是，所给出的答案都没有对我有效100％

我有一个大型视频库，可以启动全屏叠加来观看视频，我需要滚动条在视频播放时消失。

我确实找到了一个大部分时间都可以运行的脚本，但它有两个问题。首先，它在微软边缘不起作用，其次，它是我留下的唯一需要jQuery的脚本，我非常希望摆脱我的项目这种依赖。这是我一直在使用的脚本。有一个很好的香草javascript替代品？提前谢谢

$(window).load(function() {
  $(function() {
    $(".noscroll").click(function() {
      $(this).next(".hidden").addClass("show");
      $(".noscroll").addClass("blurry");

      var width = $('body').width();

      $("body").css("overflow", "hidden");
      var scrollWidth = $('body').width() - width;
      $('body').css('margin-right', scrollWidth + 'px')
    });
    $(".closebtn").click(function() {
      $(".hidden").removeClass("show");
      $(".noscroll").removeClass("blurry");
      $("body").css("overflow", "auto");
      $('body').css('margin-right', '0px')
    })
  });

  $(document).mouseup(function(i) {
    var container = $(".hidden");
    if (!container.is(i.target) && container.has(i.target).length === 0) {
      container.removeClass("show");
      $(".noscroll").removeClass("blurry")
    }
    })
  });

  $('.closeVid').click(function() {
    $('body').css('overflow', 'auto')
  });

  $('.noscroll').click(function() {
    $('body').css('overflow', 'hidden')
  });

  $(document).ready(function() {
    $('video').addClass("noscroll")
  })

Answer 1

这样的东西？ https://jsfiddle.net/konrwcaf/1/

<!DOCTYPE html>
<html>
  <head>
    <title>Simple modal</title>
    <style type="text/css">
    .modal {
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      text-align: center;
      z-index: 9000;
    }
    .modalContent {
      background: #fff;
      padding: 10px;
      min-width: 200px;
      min-height: 100px;
      display: inline-block;
      text-align: left;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    body.modalOpen .modal {
      display: block;
    }
    body.modalOpen {
      overflow: hidden;
    }
    </style>
  </head>
  <body>
    <div class="modal">
      <div class="modalContent">
        <p>I'm the modal</p>
        <p><button class="modalCloser">Close modal</button></p>
      </div>
    </div>

    <p><button class="modalOpener">Open the modal</button></p>

    <p>Content</p>

    <script type="text/javascript">
    (function() {
      var closeButtons = document.querySelectorAll('.modalCloser');
      for (var i = 0, l = closeButtons.length; i < l; i++) {
        closeButtons[i].addEventListener('click', function() {
          document.body.className = '';
        })
      }
      var openButtons = document.querySelectorAll('.modalOpener');
      for (var i = 0, l = openButtons.length; i < l; i++) {
        openButtons[i].addEventListener('click', function() {
          document.body.className = 'modalOpen';
        })
      }
    })();
  </body>
</html>

在div overlay vanilla javascript上隐藏滚动条的麻烦

1 个答案: