jQuery Mobile：.animate(scrollTop) 在修复页面转换后不起作用
Posted
技术标签:
【中文标题】jQuery Mobile：.animate(scrollTop) 在修复页面转换后不起作用【英文标题】：jQuery Mobile: .animate(scrollTop) doesn't work after fixing page transitionsjQuery Mobile：.animate(scrollTop) 在修复页面转换后不起作用 【发布时间】：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 重新加载页面。 【参考方案1】：在您的 CSS 中，您已将容器的位置属性设置为绝对。
删除您的div#container
它应该可以工作。
http://jsfiddle.net/nrxMj/16/
【讨论】：
感谢您的回复。我看到它在 jsFiddle 中工作，但不幸的是，它似乎在应用程序中并没有以这种方式工作。我知道很难解决本机应用程序问题。删除#container CSS 规则不会对页面显示或页面转换造成任何问题，但 scrollTop 仍然无法正常工作。我会更详细地研究您提出的建议，看看是否还有其他我可以做的事情。与此同时，如果您或其他人有任何其他想法 - 那太好了！
在构建移动网站时，scrollTop 遇到了同样的问题，所以我改用了 $.mobile.silentScroll(position)。 jquerymobile.com/demos/1.0rc2/docs/api/methods.html以上是关于jQuery Mobile：.animate(scrollTop) 在修复页面转换后不起作用的主要内容，如果未能解决你的问题，请参考以下文章
css 扩展动画 - 使用animate.css。提供数据属性以在页面上的任何元素中添加动画。触发sc上的动画