jsFiddle链接在底部。
我有一个使用jQuery Mobile创建的Phonegap应用程序。在原生iOS应用程序中，页面转换非常卡顿和不一致，直到我找到了这个解决方案。它使我的滚动效果不太好，所以我根据这篇后续文章做了一些修改。
在第一个解决方案之后，甚至在我实现第二个解决方案之后，以下代码在我的应用程序中停止工作：
$('html, body').animate({scrollTop: $('#specificID').offset().top}, 2500);
以上代码会在2.5秒内将用户滚动到ID为specificID的DIV。
我尝试了多种方法，但似乎都不起作用：
$('#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. 我使用container DIV包裹了[data-role="page"] DIV
<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/
Transition Fix - scrollTop 无法工作：http://jsfiddle.net/ytqke/3/
具有原生滚动的 Transition Fix - scrollTop 无法工作：http://jsfiddle.net/nrxMj/2/
最后一个 jsFiddle 是我正在使用的解决方案，也是我需要正常工作的方案。我提供第二个 jsFiddle 是为了说明在我所做的任何原生滚动更改之前，scrollTop 功能停止了。 你有什么想法可以让我使用 JavaScript 滚动页面？
我正在使用 jQuery 1.8.2、jQuery Mobile 1.2.0 和 Phonegap 2.2.0（通过 Build）。
非常感谢你能提供的任何帮助。