溢出滚动在覆盖div中无法在移动设备上工作

Question

我构建了一个叠加层，当通过JS按下按钮时会打开。当叠加层打开时，html设置为＆＃34; overflow：hidden＆＃34;和身体到＆＃34;绑定touchmove＆＃34;。当回去时，一切都回到溢出滚动和touchmove unbind。 我尝试使用mediaquery来设置覆盖有溢出：在移动设备上滚动，甚至通过JS添加类但它不起作用。它适用于我的计算机上的移动分辨率，但不是从我的手机浏览时。

这是JS：

$('#button-overlay').click(function(){
   $(this).toggleClass('active');
   $('#overlay-alicorno').toggleClass('open');
   $('html').css('overflow', 'hidden');
   $('body').bind('touchmove', function(e) {
   e.preventDefault()});
   });

和叠加层的CSS：

#overlay {
  position: fixed;
  background: #eeeae1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s, height 1s;
  z-index: 100;
}
#overlay-alicorno.open {
  opacity: 1;
  visibility: visible;
  height: 100vh;
  overflow: scroll;
}