【发布时间】：2013-02-08 12:15:51
【问题描述】：
jsFiddle 链接在底部。
我有一个使用 jQuery Mobile 创建的 Phonegap 应用程序。在我找到this solution 之前，本机 iOS 应用程序中的页面转换非常不稳定且不一致。它使我的滚动不太好，所以我对this follow-up article 做了一些更改。
在第一个解决方案之后以及在我实施第二个解决方案之后，以下代码在我的应用程序中停止工作：
$('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/
转换修复 - 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）。
感谢您提供的任何帮助。
【问题讨论】：
-
虽然我没有深入阅读您的问题，但我可能会补充一点，只要页面未缓存，滚动动画就可以在文档（就绪）上运行。换句话说，您可能需要一个唯一的 uri，以便 jqm 重新加载页面。
标签： jquery-mobile cordova scroll jquery-animate scrolltop