jsFiddle 链接位于底部。
我有一个使用 jQuery Mobile 创建的 Phonegap 应用程序。在我找到这个解决方案之前，本机 iOS 应用程序中的页面转换非常不稳定且不一致。它使我的滚动不太好，所以我根据这篇后续文章进行了一些更改。
在第一个解决方案之后以及在我实施第二个解决方案之后，以下代码在我的应用程序中停止为我工作：
$('html, body').animate({scrollTop: $('#specificID').offset().top}, 2500);
上面的代码在 2.5 秒内将用户向下滚动到 ID 为 的 DIV 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.我用DIV包裹[data-role="page"]了containerDIV
<body>
<div id="container">
<div data-role="page">
2.我添加了以下Javascript
$(document).one('mobileinit', function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#container');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
3.我添加了以下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);
}
我设置了三个 jsFiddles 来展示这一点：
普通的 jQuery - scrollTop 工作：http: //jsfiddle.net/pxJcD/1/
过渡修复 - scrollTop 不工作：http: //jsfiddle.net/ytqke/3/
带有本机滚动的转换修复 - scrollTop 不工作：http: //jsfiddle.net/nrxMj/2/
最后一个 jsFiddle 是我正在使用的解决方案，也是我需要工作的解决方案。我提供了第二个，以表明该scrollTop功能在我进行任何本机滚动更改之前停止。关于我可以做些什么来使用javascript向下滚动页面有什么想法吗？
我正在使用 jQuery 1.8.2、jQuery Mobile 1.2.0 和 Phonegap 2.2.0（通过 Build）。
感谢您提供的任何帮助。