jQuery禁用并启用与slideToggle一起滚动

Question

我对jQuery很陌生，我在想如何首先禁用对slideToggle事件的第一次单击进行滚动以将div向下滑动，然后在使div向上切换时启用对第二次单击的滚动？

$(document).ready(function(){
  $("#flip").click(function(){
    $('html, body').on('scroll touchmove mousewheel', function(e){
      e.preventDefault();
      e.stopPropagation();
      return false;
    });
    $("#panel").slideToggle("slow");
  });
});

使用我当前的代码，我可以向下滑动div并禁用滚动，而当向上滑动div时仍保持禁用滚动。

HTML：

<div id="flip" class="page-header" data-parallax="true" style="background-image: url('sample.jpg');">
 <div class="container">
   <div class="row">
      <div class="col-md-8 ml-auto mr-auto">
         <div class="brand">
            <h2 class="audiowide-font">Lorem Ipsum</h2>
         </div>
       </div>
    </div>
 </div>
</div>
<div id="panel">Hello world!</div>

 $(document).ready(function() { $("#flip").click(function() { $('html, body').on('scroll touchmove mousewheel', function(e) { e.preventDefault(); e.stopPropagation(); return false; }) $("#panel").slideToggle("slow"); }); }); 

  #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #353839; } #panel { height: calc(100vh - 40vh); display: none; ove 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="flip" class="page-header" data-parallax="true" style="background-image: url('sample.jpg');"> <div class="container"> <div class="row"> <div class="col-md-8 ml-auto mr-auto"> <div class="brand"> <h2 class="audiowide-font">Lorem Ipsum</h2> </div> </div> </div> </div> </div> <div id="panel">Hello world!</div> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> 

Answer 1

所以在这里我只是添加了一个检查panel是否可见 。 如果可见，则将阻止滚动，否则将遵循正常流程。

 $(document).ready(function() { $("#flip").click(function() { $("#panel").slideToggle("slow"); }); $('html, body').on('scroll touchmove mousewheel', function(e) { if($("#panel").is(':visible')){ //checks wether #panel is visible or hidden e.preventDefault(); e.stopPropagation(); return false; } }) }); 

 #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #353839; } #panel { height: calc(100vh - 40vh); display: none; ove 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="flip" class="page-header" data-parallax="true" style="background-image: url('sample.jpg');"> <div class="container"> <div class="row"> <div class="col-md-8 ml-auto mr-auto"> <div class="brand"> <h2 class="audiowide-font">Lorem Ipsum</h2> </div> </div> </div> </div> </div> <div id="panel">Hello world!</div> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> text to get scrollbar<br> </div>