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源。第二个是我根据他们在iscroll网站上给出的示例创建的自定义js，其中包含以下代码：

 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);

 }

以下是代码中使用的div的css：

#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转向侧面，它会挂起几秒钟，然后iscroll的东西就可以了。然后，如果我将ipad移回纵向模式，它会再次挂起，但滚动也会在纵向模式下再次开始工作。有人可以帮我解决这个问题吗？我拉着我的头发试图找出问题所在。我知道我最近将ipad升级到了最新的操作系统版本，但我相信这个问题在我做之前就已经发生了。

Answer 1

好了解它之后，它似乎工作的唯一方法是，如果我将ipad_scroller div 1800px的高度和ipad_wrapper的高度设置为200px

Answer 2

我认为包装器div需要z-index：1而不是滚动内容...我不认为滚动内容需要任何定位，z-index，溢出或高度指定。

虽然可能是错的

Answer 3

您不必刷新方向更改滚动吗？

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

Jquery iScroll不能在iPad上滚动

3 个答案: