iPhone 앱 - JQTouch & iScroll이 작동하지 않습니다 - 어떤 아이디어입니까?

Question

누군가 나를 도와 줄 수 있었고, 2 일 동안 벽에 머리를 두드렸다. iScroll을 내 phonegap/jqtouch 앱과 함께 사용하려고합니다. 내가 인터넷에서 찾을 수있는 모든 제안을 시도했지만 스크롤이나 고무 밴딩이 없으므로 페이지 하단을 볼 수 없습니다. 한마디에 내 코드는 다음과 같습니다

HTML 헤더 :

<!-- 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에는 다음이 포함

<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 (필자는 '래퍼'와 '스크롤'div를 추가 한) 위의 통계 섹션에 정보를 표시하는 refreshStats() 함수는 다음과 같습니다.

$(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 이내 물건을 스크롤 할 수 있도록 개미 있지만 주위에 내 머리를 얻을 수 없습니다! 감사합니다, Nick

Answer 1

iScroll4에 대해서는 확실하지 않지만 원래의 iScroll은 CSS 클래스에 따라 정확하게 스크롤해야합니다. 특히 래퍼를 배치해야하고 오버플로를 설정해야합니다. iScroll4에 대한 데모에서 볼 수 있습니다.

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

난 당신이 이미 했어 (단지 CSS를 포함하지 않았다) 잘 모르겠어요 -하지만 코드가 잘 보이는 : 여전히 래퍼와 스크롤러에 유사한 속성을 설정.

Answer 2

iScroll (pre-iScroll4, 아직 테스트하지 않은 4 개)에 과도한 문제가있어 UL 목록 대신 DIV를 사용하게되었습니다. 이 라인에 추가 된 최신 iScroll (v3.7.1)에서 라인 (81)의 주위에 iScroll 코드로

that.refresh(); 

:하지만 ... 오늘은이 라인을 추가하는 것이 좋습니다 google groups (see reply by manmade at 9:59)에 게시물을 발견 바로 선 후 "START_EVENT"의 경우 내 라인 85 : 작동하는 이유

that.touchStart(e); 

나는 정확히 분석하지 않은,하지만 완벽하게 스크롤 내 사업부를 얻기를 위해 작동합니다.

Answer 3

동일한 문제가있었습니다. 내가 아이폰에서 방향을 바꿀 때까지 스크롤해야했던 div가 rubberbanding을 보여줄 것입니다. iscroll doc 페이지에서 timeout 메소드를 시도했지만 아무 것도 작동하지 않았습니다. 내 스크롤 래퍼를 만들 때

사용 버전 4.0의 beta4 나는

checkDOMChange: true 

을 추가했다. 이것은 매력처럼 작동합니다. 문제가 무엇인지는 분명하지 않지만 jQTouch 페이지에서이 문제를 사용하고 있습니다.

한가지는 checkDOMChange을주의해야 : 실험 것으로 표시됩니다 ... 좋아, 마지막으로이 작업을 얻었다

Answer 4

HTH. jQTOuch와 iScroll이 서로 잘 동작하게하려면 JQTouch가 사라질 때마다 페이지의 스크롤 영역을 재설정해야합니다. 즉, div를 숨기면 iScroll은 다음에 표시 할 내용을 스크롤 할 항목을 알지 못합니다. 결과적으로 악명 높은 고무 밴드 효과를 얻게됩니다.이 문제를 해결하려면 div가 호출 된 직후에 스크롤 영역을 재설정하는 이벤트 리스너를 추가하십시오. 100 ~ 300ms의 지연이 있는지 확인하십시오. 이 코드는 아래에 변수가 myScroll라고 가정

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

그리고 보조 노트에

, 여기 iScroll 사용하여 여러 스크롤러을 설정하는 방법은 다음과 같습니다

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

희망이 누군가를하는 데 도움이됩니다.

Answer 5

나는 같은 문제에 직면했다. 내 요소는 그냥 반송하고 다시 정착하는 데 사용됩니다. scrollDj를 편집하여 checkDOMChanges : true로 만들었으며 정상적으로 작동하기 시작했습니다.

Answer 6

이것은 내 해결책입니다. 위의

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

코드는 당신의 iScroll 변수가 myScroll, 하고 코드가이 링크를 탭으로 새로 고침 당신의 iScroll을 강제 있다고 가정합니다.