javascript - iPhone 应用程序 - JQTouch 和 iScroll 不起作用 - 有什么想法吗？

Question

谁能帮帮我，我的头撞墙已经两天了!尝试让 iScroll 与我的phonegap/jqtouch 应用程序一起使用。已经尝试了我在互联网上可以找到的所有建议，但我得到的只是没有滚动或橡皮筋，所以我无法查看页面底部。简而言之，我的代码是:

HTML header :

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" src="myAppCode.js"></script>
<script type="text/javascript">

    var myScroll;

    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }

    function onDeviceReady()
    {
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', loaded, false);
    }

    function loaded()
    {
        myScroll = new iScroll('wrapper');
        myScroll.refresh();
    }

</script>

HTML(我添加了“wrapper”和“scroller”div):

<!-- Options Page header bar-->
 <div id="options_page">
  <div class="toolbar">
   <h1>Past Paper</h1>
   <a class="button flip" href="#reset_page">Reset Stats</a>
  </div>

<!-- why won't you scroll??? -->
 <div id="wrapper">
  <div id="scroller">

   <!-- Stats section div - dynamically generated stats by refreshStats() --> 
   <div id="Stats"></div>

    <h2>General</h2>
    <ul class="rounded">
    <li>Only new questions?<span class="toggle"><input type="checkbox" id="notSeen" /></span></li></ul>

    <h2>Categories</h2>
    <ul class="rounded">
     <li>Cardiology<span class="toggle"><input type="checkbox" id="cardiology" /></span></li>
     <li>Respiratory<span class="toggle"><input type="checkbox" id="respiratory" /></span></li>
     <li>Gastrointestinal<span class="toggle"><input type="checkbox" id="gastrointestinal" /></span></li>
     <li>Neurology<span class="toggle"><input type="checkbox" id="neurology" /></span></li>
    </ul>

    <div id="optionStartQuiz">
     <ul><li class="whiteButton">Start!</li></ul>
    </div>
   </div>
  </div>
</div>

myAppCode.js 包含 refreshStats() 函数，用于在上面的 Stats div 中显示信息:

$(document).ready(function()
{       
    // load variables from local storage              
    loadLocalStorage();

    // load the stats div
    refreshStats();

    // refresh scores everytime the main page is loaded
    $('#main_page1').bind('pageAnimationStart', function(){
        refreshStats();
        }); 
});

function refreshStats()
{
        // an HTML ul
    var tempStats = '<h2>Current Stats</h2><ul class="rounded"><li>Questions completed<span style="float: right">' + OVERALL_questionsFirstTime + '/' + OVERALL_numberOfQuestions + '</span></li><li>Percentage correct<span style="float: right">' + percentageScore + '%</span></li></ul>';

        // display me
    $('#Stats').html(tempStats);
}

所以基本上我希望能够滚动包装器和滚动器 div 中的内容，但无法理解它!谢谢，尼克

Answer 1

我也遇到了同样的问题。原本应该滚动的 div 会出现橡皮筋，直到我改变 iPhone 上的方向。我尝试了 iscroll 文档页面中的超时方法，但没有任何效果。

使用我添加的 v4.0 beta4

checkDOMChange: true

在创建我的滚动包装器时。这就像一个魅力。不太确定问题是什么，但我在 jQTouch 页面中使用它。

需要注意的一件事是，checkDOMChange: 被列为实验性...

第