iPad向下滑动导致滚动锁定

Question

我有一个带有渐变背景的固定元素，允许显示叠加（从左侧开始）。现在这种方法很完美，但问题出在iPad上。

问题：如果您点击iPad上的按钮并立即向下滑动（不向下滚动但向上滚动），然后立即尝试向上滚动（开始滚动内容）。滚动将冻结，直到你放开几秒钟。

我已经进入完全调试但我无法弄清楚为什么会发生这种情况。

在某些时候，我注意到当它在锁定时尝试滚动时，页脚开始显示。

编辑：试用iPad的网址：http://s.codepen.io/jagmitg/debug/LVvxZm？

$('.mainclick').click(function(e) {
  e.preventDefault();
  $('.left-panel, .sliding-panel-fade-screen').toggleClass('is-visible');
/*  $('.left-panel').addClass(cssClass);
  $('.left-panel').attr('slidingClass', cssClass);*/
});

$('.sliding-panel-fade-screen').click(function(e) {
  e.preventDefault();
  $('.left-panel, .sliding-panel-fade-screen').toggleClass('is-visible');
/*  $('.left-panel').addClass(cssClass);
  $('.left-panel').attr('slidingClass', cssClass);*/
});

.sliding-panel-content {
  max-height: none;
  overflow: hidden;
  top: 0px;
  bottom: 0px;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
}
.sliding-panel-content.is-visible {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.sliding-panel-content.midd-content.is-visible {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.sliding-panel-content .slide-content {
  max-height: none;
  position: relative;
  overflow: hidden;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #FFF;
  display: block;
  -webkit-overflow-scrolling: touch;
}
.sliding-panel-content .slide-content .fixedContent {
  max-height: 100%;
  overflow: auto;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  z-index: 99999;
  padding: 10px;
}

.sliding-panel-close {
  position: fixed;
  right: 22px;
  top: 17px;
  height: 19px;
  width: 19px;
  display: block;
}

.closeBtn {
  cursor: pointer;
}

.sliding-panel-fade-screen {
  position: fixed;
  overflow: auto;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.15s ease-out 0s;
  -moz-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  background: #ececec;
  opacity: 0;
  visibility: hidden;
}
.sliding-panel-fade-screen.is-visible {
  opacity: 0.85;
  visibility: visible;
}

.noscroll {
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
}

.right-panel {
  position: fixed;
  left: auto;
  right: 0px;
  width: 400px;
  -webkit-transform: translateX(400px);
  -moz-transform: translateX(400px);
  -ms-transform: translateX(400px);
  -o-transform: translateX(400px);
  transform: translateX(400px);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.left-panel {
  position: fixed;
  left: 0px;
  right: auto;
  width: 502px;
  -webkit-transform: translateX(-576px);
  -moz-transform: translateX(-576px);
  -ms-transform: translateX(-576px);
  -o-transform: translateX(-576px);
  transform: translateX(-576px);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.middle-content {
  position: fixed;
  margin: 0 auto;
  left: 0px;
  right: 0px;
  width: 85%;
  -webkit-transform: translateY(-85%);
  -moz-transform: translateY(-85%);
  -ms-transform: translateY(-85%);
  -o-transform: translateY(-85%);
  transform: translateY(-85%);
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="js-menu-screen sliding-panel-fade-screen"></div>

<div class="js-menu sliding-panel-content left-panel">
  <div class="slide-content">
    <div class="fixedContent">
      <span class="closeBtn sliding-panel-close"></span>
      <div class="dynContent">

        <div class="description-panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis aliquam libero, ut lobortis dui iaculis a. Pellentesque efficitur lorem sit amet nulla mattis maximus. Donec accumsan ultricies justo eget fermentum. Quisque dapibus aliquet nunc eu laoreet. Nulla ut nisl nec nibh dignissim cursus. Vivamus placerat erat dictum neque consequat faucibus. Phasellus condimentum diam nec sapien tempus venenatis. Aenean id velit quis tortor consequat lobortis. Vivamus leo orci, porttitor et augue sagittis, pretium rhoncus odio. Donec et neque eu purus tempus congue vitae nec ipsum. Nam tempor eros ac justo ullamcorper semper. In rhoncus lectus quis suscipit sollicitudin.

Fusce vel ex mi. Morbi placerat lorem et velit egestas consequat. Phasellus odio ante, ullamcorper nec hendrerit eu, tempus a nibh. Ut non rhoncus tellus, et dignissim dolor. Donec tempor, diam auctor eleifend mattis, mi diam vestibulum arcu, eget laoreet velit massa ut nisl. Aliquam vel odio eu lorem lacinia placerat. Phasellus sed auctor leo, et hendrerit ex. Nunc quis orci sollicitudin, porttitor elit quis, tincidunt magna. Praesent at molestie dui, vitae ultrices mauris. Pellentesque sodales ullamcorper lacus ullamcorper pretium. Nam convallis orci orci, eget malesuada mauris auctor nec. Fusce vitae lectus ut elit commodo dignissim. Suspendisse potenti.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur sodales dui commodo velit euismod vulputate. Cras mollis imperdiet ipsum sed euismod. Sed facilisis purus quis placerat semper. Suspendisse ultrices tristique augue id rhoncus. Fusce pharetra interdum neque. Integer eros ante, pharetra eu mattis vitae, mollis vel dui. Donec vel rhoncus magna. Aenean dolor turpis, iaculis id viverra non, elementum nec sapien. Nullam vel ornare tellus. Duis at quam hendrerit, pretium diam sit amet, placerat risus. Quisque eu ex eros.

Sed feugiat tristique purus, vitae egestas risus tincidunt ut. Mauris a massa arcu. Praesent sagittis pulvinar lectus, sed vehicula lacus dignissim ac. Nunc ullamcorper orci augue, eget maximus metus cursus sit amet. Pellentesque egestas eu velit nec faucibus. Fusce ornare felis leo, ut laoreet enim iaculis a. Integer vehicula nisi non orci lobortis, et lobortis velit congue. Phasellus sodales tellus ac euismod efficitur. In commodo ultricies pulvinar.

In diam arcu, dignissim ac interdum porta, accumsan sed metus. Nunc convallis sem sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus iaculis, mi at pulvinar semper, nulla enim finibus nibh, ac semper sapien purus quis magna. Vestibulum et augue viverra, cursus ipsum nec, semper urna. Nam pretium est enim. Donec nec ante vehicula, sodales sem id, tincidunt quam. Quisque interdum, nunc eget interdum faucibus, turpis mi accumsan nulla, a faucibus sem nibh nec sem.



        </div>

      </div>
    </div>
  </div>
</div>

<a href="#" class="mainclick">Click here</a>