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 추가 :
일반 jQuery를 - 작업 scrollTop을 : http://jsfiddle.net/pxJcD/1/
,
전환 수정 - scrollTop이 작동하지 : http://jsfiddle.net/ytqke/3/
전환 수정 기본 스크롤 승/- scrollTop가 작동하지 : http://jsfiddle.net/nrxMj/2/
마지막 jsFiddle 내가 사용하고있는 솔루션과 하나입니다 I 일해야합니다. 두 번째 방법은 scrollTop
기능이 내가 만든 네이티브 스크롤링 변경 전에 중지되었음을 보여줍니다. 자바 스크립트를 사용하여 페이지를 스크롤 할 수있게하려면 어떻게해야할까요?
jQuery 1.8.2, jQuery Mobile 1.2.0 및 Phonegap 2.2.0 (Build를 통해)을 사용하고 있습니다.
제공 할 수있는 도움에 감사드립니다.
, 나는 스크롤 애니메이션이 한 페이지가 캐시되지 않기 때문에, 문서 (준비)에서 작동하는 것이 추가 할 수 있습니다. 즉, jqm이 페이지를 다시로드 할 수 있도록 고유 한 URI가 필요할 수 있습니다. –