Jquery iScroll не прокручивается на iPad

Question

Кажется, я не могу заставить iScroll работать на iPad и провел несколько дней, пытаясь понять это без удачи, так что, надеюсь, кто-то может мне помочь.Ниже приведен код:

Сначала я включаю файлы js:

<script type="text/javascript" src="/js/iscroll.js?v3.7.1"></script>
<script type="text/javascript" src="/js/ipad_scroller.js"></script>

iscroll.js является источником iscroll.Второй - это пользовательские файлы js, которые я создал на основе примера, который они приводят на сайте iscroll, который содержит следующий код:

 var deviceAgent = navigator.userAgent.toLowerCase();
 var agentID = deviceAgent.match(/(ipad)/);

 if(agentID) {

  var myScroll;
  var a = 0;
  function loaded() {
   setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below.

   // Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier.
   myScroll = new iScroll('ipad_scroller', {vScrollbar:true});
  }

  // Change wrapper height based on device orientation. Not strictly needed by iScroll, you may also use pure CSS techniques.
  function setHeight() {
   var headerH = document.getElementById('ipad_header').offsetHeight,
    footerH = document.getElementById('ipad_footer').offsetHeight,
    wrapperH = window.innerHeight - headerH - footerH;
   document.getElementById('ipad_wrapper').style.height = wrapperH + 'px';
  }

  // Check screen size on orientation change
  window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false);

  // Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer).
  // If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove.
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

  // Load iScroll when DOM content is ready.
  document.addEventListener('DOMContentLoaded', loaded, false);

 }

Вот css для div, используемых в коде:

#ipad_header {
 width:100%;
 height:250px;
}

#ipad_footer {
 width:100%;
 height:48px;
 padding:0;
 border-top:1px solid #444;
}

#ipad_wrapper {
height:100px;
        position: relative;
        overflow: auto; 
}

#ipad_scroller {
position: relative;
        width: 100%;
        z-index: 1;
        overflow: hidden;
        height: auto;
}

Тогда на html-странице у меня есть

<div id="ipad_header">//content at the very top that I want to stay on top as it scrolls</div>

<div id="ipad_wrapper">
  <div id="ipad_scroller">
  //The rest of my page content
  </div>
</div>

<div id="ipad_footer">Footer content here</div>

Теперь у меня это работало одно время, но по какой-то причине оно перестало работать на ipad.Странно то, что если я перевожу ipad в горизонтальный режим, он зависает на несколько секунд, тогда все работает нормально.Затем, если я перевожу ipad обратно в портретный режим, он снова зависает, но прокрутка снова начинает работать и в портретном режиме.Может кто-нибудь помочь мне в этом?Я дергаю себя за волосы, пытаясь выяснить, что пошло не так.Я знаю, что недавно обновил ipad до последней версии ОС, но я считаю, что эта проблема возникала до того, как я это сделал.

Answer 1

Ну, после того, как возиться с этим, единственный способ, которым это, похоже, сработало, это если я сделал высоту ipad_scroller div 1800px и высоту ipad_wrapper равной 200px

Answer 2

Не нужно ли обновлять Scroller при смене ориентации?

setTimeout(function() { myScroll.refresh(); }, 0);

Answer 3

Я думал, что div-обертка - это то, что нужно для z-index: 1, а не для прокручиваемого содержимого ... Я не думаю, что для прокручиваемого содержимого требуется какое-либо позиционирование, z-index, переполнение или высота.быть неправым, хотя