Невозможно прокрутить тело после переключения - PullRequest
Новая
       53

Невозможно прокрутить тело после переключения

0 голосов
/ 16 октября 2019

Я запретил пользователям прокручивать тело HTML, когда он открывает переключатель с помощью jQuery. Однако я изо всех сил пытаюсь включить прокрутку назад, когда тумблер закрыт. Я думаю, что я должен использовать два класса jQuery в 

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

, а другой заявляет, что .toggleClass больше не активен. Однако я пока не знаю, как это сделать или возможно ли это.

Заранее спасибо за помощь этому новичку.

Вот ссылка на мой CodePen, если вам будет проще,Тот же код прилагается ниже без текста.

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

Ответы [ 2 ]

1 голос
/ 16 октября 2019

Вы также можете использовать: 

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

И затем создать класс в своем CSS: 

.hidden {
  overflow: hidden;
}
1 голос
/ 16 октября 2019

Вы не удаляете $('body').css({overflow: 'hidden'}); после повторного нажатия на него. Я бы справился с этим, проверив, имеет ли .toggle класс active. Например: 

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

Я обновил ваш CodePen этим новым кодом.

...