2013-02-22 2 views
3

jsFind 링크가 아래에 있습니다.jQuery Mobile : 페이지 전환을 고정한 후. ({scrollTop})가 작동하지 않습니다.

jQuery Mobile으로 만든 Phonegap 앱이 있습니다. this solution을 찾을 때까지 페이지 전환이 고르지 않고 기본 iOS 앱에서 일관성이 없었습니다. 내 스크롤을 그렇게 크게 만들지 않았으므로 this follow-up article에 약간의 변경을가했습니다.

$('html, body').animate({scrollTop: $('#specificID').offset().top}, 2500); 

위의 코드 스크롤 사용자가 페이지 아래 2.5 초 이상 DIV에 : 나는 두 번째 솔루션을 구현

최초의 솔루션 후 아직 한 후, 다음 코드는 내 응용 프로그램에서 나를 위해 작동이 중지 ID는 specificID입니다.

나는 여러 가지를 시도했지만 아무것도 작동하는 것 같다없는 : 그래서

$('#container').animate({scrollTop: $('#specificID').offset().top}, 2500); 
$('html, body, #container').animate({scrollTop: $('#specificID').offset().top}, 2500); 
$('.scrollable').animate({scrollTop: $('#specificID').offset().top}, 2500); 
$(".scrollable").animate({ scrollTop: $("#specificID").scrollTop() }, 2500); 

, 여기에 내가이 페이지 전환 해결하기 위해 내 JQuery와 모바일 코드를 조정하는 방법입니다

1. 나는 [data-role="page"] 포장 container DIV와 DIV

2

<body> 
    <div id="container"> 
    <div data-role="page"> 
내가 추가 자바 스크립트

3.

$(document).one('mobileinit', function() { 
    // Setting #container div as a jqm pageContainer 
    $.mobile.pageContainer = $('#container'); 

    // Setting default page transition to slide 
    $.mobile.defaultPageTransition = 'slide'; 
}); 
다음 나는이 표시하는 다음 CSS

body { 
    margin: 0; 
} 
div#container { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    bottom: 0; 
} 
div[data-role="header"] { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 
div[data-role="content"] { 
    position: absolute; 
    top: 41px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
.scrollable { 
    overflow-y: scroll; 
    -webkit-overflow-scrolling: touch; 
} 
/* iOS specific fix, don't use it on Android devices */ 
.scrollable > * { 
    -webkit-transform: translateZ(0px); 
} 

I 설정 세 jsFiddles 추가 :

  1. 일반 jQuery를 - 작업 scrollTop을 : http://jsfiddle.net/pxJcD/1/

  2. ,
  3. 전환 수정 - scrollTop이 작동하지 : http://jsfiddle.net/ytqke/3/

  4. 전환 수정 기본 스크롤 승/- scrollTop가 작동하지 : http://jsfiddle.net/nrxMj/2/

마지막 jsFiddle 내가 사용하고있는 솔루션과 하나입니다 I 일해야합니다. 두 번째 방법은 scrollTop 기능이 내가 만든 네이티브 스크롤링 변경 전에 중지되었음을 보여줍니다. 자바 스크립트를 사용하여 페이지를 스크롤 할 수있게하려면 어떻게해야할까요?

jQuery 1.8.2, jQuery Mobile 1.2.0 및 Phonegap 2.2.0 (Build를 통해)을 사용하고 있습니다.

제공 할 수있는 도움에 감사드립니다.

+0

, 나는 스크롤 애니메이션이 한 페이지가 캐시되지 않기 때문에, 문서 (준비)에서 작동하는 것이 추가 할 수 있습니다. 즉, jqm이 페이지를 다시로드 할 수 있도록 고유 한 URI가 필요할 수 있습니다. –

답변

2

CSS에서 컨테이너의 position 속성을 Absolute로 설정했습니다. div#container 제거하십시오. 작동합니다.나는 깊은 질문을 읽을하지 않았지만

http://jsfiddle.net/nrxMj/16/

+0

답변 해 주셔서 감사합니다. jsFiddle에서 작동하는 것을 볼 수 있지만, 안타깝게도 앱 내부에서 그런 식으로 작동하지 않는 것 같습니다. 네이티브 앱 문제를 해결하는 것이 어렵다는 것을 알고 있습니다. '# container' CSS 규칙을 제거해도 페이지 표시 또는 페이지 전환에 문제가 발생하지 않았지만 scrollTop은 여전히 ​​작동하지 않습니다. 당신이 제안한 것을 더 자세히 연구하고 내가 할 수있는 다른 일이 있는지 알아 보겠습니다. 그 동안 귀하 또는 다른 누군가가 다른 생각을 가지고 있다면 - 좋을 것입니다! –

+1

모바일 사이트를 구축 할 때 scrollTop과 동일한 문제가있어서 대신 $ .mobile.silentScroll (위치)을 사용했습니다. http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html – DPA