iPhone應用程序 - JQTouch和iScroll將不起作用 - 任何想法？

Question

任何人都可以幫助我，我的頭撞在牆上2天！ 試圖讓iScroll與我的phonegap / jqtouch應用程序一起使用。 已經嘗試了我可以在互聯網上找到的所有建議，但我得到的是沒有滾動或橡皮筋，所以我無法查看頁面的底部。 我的代碼簡而言之是：

HTML標題：

<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'divs）：

<!-- 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 doc頁面中的超時方法但沒有任何效果。

使用v4.0 beta4我添加了

checkDOMChange: true

在創建我的滾動包裝器時。 這就像一個魅力。 不確定問題是什么，但我在jQTouch頁面中使用它。

有一點需要注意，checkDOMChange：被列為實驗...

心連心

Answer 2

好的，終於搞定了。 為了讓jQTOuch和iScroll相互配合，每次JQTouch讓它們消失時，頁面上的滾動區域需要重置。 換句話說，一旦你隱藏了div，iScroll就不知道下次它可見時滾動的內容。 因此，你會得到臭名昭着的橡皮筋效應。 要解決此問題，只需添加一個事件偵聽器，在調用div后立即重置滾動區域。 確保延遲100至300毫秒。 下面的代碼假設您的變量名為myScroll ：

$(".about").tap(function(){
    setTimeout(function(){myScroll.refresh()},300);
});

在旁注中，這里是如何使用iScroll建立多個滾動條：

var scroll1, scroll2;
function loaded() {
    scroll1 = new iScroll('wrapper1');
    scroll2 = new iScroll('wrapper2');
}

希望這有助於某人。

Answer 3

我面臨同樣的問題。 我的元素只用於反彈和穩定。 我編輯了scroll.js以使checkDOMChanges：true並且它開始正常工作。

Answer 4

這是我的解決方案。

$("a").tap(function(){ setTimeout(function(){myScroll.refresh()},300); });

上面的代碼假設您的iScroll變量是myScroll，並且代碼強制您在點擊鏈接時刷新iScroll。

Answer 5

我不確定iScroll4，但原始的iScroll依賴於CSS類來正確滾動 - 特別是需要定位的包裝器，並且有溢出設置 - 在iScroll4的演示中我看到它們仍然在包裝器上設置類似的屬性和滾動條：

http://www.cubiq.org/dropbox/iscroll4/examples/simple/

我不確定你是否已經完成了這個（並且只是沒有包含CSS） - 但你的代碼看起來很好。

Answer 6

我曾經遇到過iScroll（pre-iScroll4，尚未測試4）的麻煩，讓它與DIV而不是UL列表一起工作。 但是......今天我在Google群組中發現了一個帖子（請參閱9月59日的manmade回復） ，建議添加一行：

that.refresh();

在第81行的iScroll代碼中。在最新的iScroll（v3.7.1）中，這一行添加在第85行，在“START_EVENT”的情況下，就在該行之后：

that.touchStart(e);

我沒有完全分析它為什么會起作用，但它可以讓我的div完美滾動。