3

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 来展示这一点:

  1. 普通的 jQuery - scrollTop 工作:http: //jsfiddle.net/pxJcD/1/

  2. 过渡修复 - scrollTop 不工作:http: //jsfiddle.net/ytqke/3/

  3. 带有本机滚动的转换修复 - scrollTop 不工作:http: //jsfiddle.net/nrxMj/2/

最后一个 jsFiddle 是我正在使用的解决方案,也是我需要工作的解决方案。我提供了第二个,以表明该scrollTop功能在我进行任何本机滚动更改之前停止。关于我可以做些什么来使用javascript向下滚动页面有什么想法吗?

我正在使用 jQuery 1.8.2、jQuery Mobile 1.2.0 和 Phonegap 2.2.0(通过 Build)。

感谢您提供的任何帮助。

4

1 回答 1

2

在您的 CSS 中,您已将容器的位置属性设置为绝对。删除你的div#container 它应该可以工作。

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

于 2013-02-22T20:47:10.270 回答