Question

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。我用[data-role="page"] DIV

包裹container 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）。

感谢您提供任何帮助。

Answer 1

在CSS中，您已将容器的position属性设置为Absolute。删除div#container 它应该工作。

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

jQuery Mobile：.animate（{scrollTop}）在修复页面转换后不起作用

1 个答案: