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>

＆＃13;

＆＃13;

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

＆＃13;

  #panel,
#flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #353839;
}

#panel {
  height: calc(100vh - 40vh);
  display: none;
  ove

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>