Проблема с (правым) слайдом в переполняющем теле панели навигации

Question

Я не могу решить проблему с моим кодом. Я работал над правой скользящей панелью навигации. Но когда панель запускается в своем неактивном состоянии из своего активного состояния, тело переполняется вокруг оси x.

Вот код, который я написал

$(document).ready(function(){
  $('.toggle').click(function(){
    $('.menu').toggleClass('active')
  })
})

body{
  margin:0;
  padding:0;  
  overflow-x: hidden; 
}
.menu, .toggle{
  position:absolute;
}
.menu{
  top:0;
  bottom:0;
  right:-300px;
  width:300px;
  background:green;
  transition:.22s;
}
.menu.active{
  right:0;
}
.toggle{
  top:0;
  left:0;
  width:50px;
  height:50px;
  background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu"></div>
<div class="toggle"></div>

код: https://codepen.io/ayushgx/pen/mYgyJe

Я уже пробовал overflow-x: hidden в своем коде, но, похоже, ничего не работает точно.

Я также нашел перо все, что он делает в своем коде, который я уже сделал, но у меня ничего не получается

Вот ручка: https://codepen.io/erikterwan/pen/grOZxx

Я не знаю, пропускаю ли я что-то

Поскольку код отлично работает в настольном браузере, но не работает в мобильных браузерах. Но в данной ручке от erikterwan она отлично работает как для мобильных, так и для настольных компьютеров

Answer 1

Поскольку ваше меню и переключатель расположены абсолютно, родительский контейнер должен содержать position: relative:

.body{
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

Обратите внимание, что я добавил код в кодовую ручку, чтобы гарантировать, что высота меню соответствует ожидаемой:

https://codepen.io/anon/pen/NVmPzy

Теперь это должно работать на мобильном телефоне.