小编Bma*_*n70的帖子

打开覆盖层后如何防​​止身体滚动?

我正在寻找一种方法,以防止打开叠加层“弹出部分”时主体滚动,并且仅允许在“弹出部分” div上滚动。我正在寻找使用javascript的解决方案,但是我对JS不太有经验

有没有人有什么建议?

    $('#toggle-menu').click(function() {
      $(this).toggleClass('active');
    $('.popup-section').toggleClass('open');
      $('html').toggleClass('open');
    });

    $('.popup-section').click(function() {
      $(this).toggleClass('active');
    $('.popup-section').removeClass('open');
      $('.button_container').removeClass('active');
      $('html').removeClass('open');
    });
Run Code Online (Sandbox Code Playgroud)
    .popup-section{
      display: none;
      opacity: 0;
      height: 100vh;
      left: 0;
      right: 0;
      width: 100vw;
	  overflow: scroll;
    }

    .popup-section.open {
      display: block;
      opacity: 1;
	  z-index: 99;
    }

    .popup-background {
      height: 100vh;
      width: 100vw;
      background-color: #ccbcaf;
      z-index: 90;
      cursor: pointer;
	  position: fixed;
	  overflow: scroll;
      top: 0;
    }
Run Code Online (Sandbox Code Playgroud)
    <div class="button_container open" id="toggle-menu">
      <span class="top"></span>
	  <span class="bottom"></span>  
    </div>

    <div class="popup-section">
    <div class="popup-background" title="">
	  <!--CONTENT-->
    </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

javascript

11
推荐指数
2
解决办法
254
查看次数

标签 统计

javascript ×1