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完美滚动。