关闭切换后无法滚动正文答案

【问题标题】：Not able to scroll through body after closing toggle关闭切换后无法滚动正文
【发布时间】：2020-02-13 11:03:01
【问题描述】：

一旦用户使用 jQuery 打开切换，我就阻止了用户滚动浏览 HTML 正文。但是，一旦关闭切换，我正在努力启用回滚。我想我应该在

中使用两个 jQuery 类

$('body').css({overflow: 'hidden'});

另一个声明 .toggleClass 不再处于活动状态。但是，我还不知道如何做到这一点，也不知道是否可行。

提前感谢您帮助这个新手。

这是我的 CodePen 的链接，以防您发现它更容易。下面附上相同的代码，但没有lipsum文本。

代码笔：https://codepen.io/fergos2/pen/jOOWeqR

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
    $('body').css({overflow: 'hidden'});
  });
});

body {
  overflow: auto;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.text {
  padding: 10px;
}

.wrapper {
  background-color: pink;
  position: relative;

  display: flex;
  align-items: center;
}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.toggle.active {
  background-color: red;
}

.toggle-content {
  display: none;
}

.toggle-content.active{
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
}

<div class="container">
  <div class="wrapper">
    <div class="toggle">T</div>
    <div class="toggle-content">
      <p>Some content</p>
    </div>
  </div>

  <div class="text">
  </div>

</div>

【问题讨论】：

标签： jquery css overflow toggle document-body

【解决方案1】：

你也可以使用：

$("body").toggleClass("hidden");

然后在你的css中创建一个类：

.hidden {
  overflow: hidden;
}

【讨论】：

【解决方案2】：

再次单击$('body').css({overflow: 'hidden'}); 后，您并没有删除它。我会通过检查 .toggle 是否有 active 类来处理这个问题。像这样：

if($('.toggle').hasClass('active')){
    $('body').css({overflow: ''});
}else{
    $('body').css({overflow: 'hidden'});
}

我已经用这个新代码更新了你的CodePen。

【讨论】：