jQuery Mobile：.animate（{scrollTop}）在修復頁面轉換後不起作用

js中間鏈接位於底部。jQuery Mobile：.animate（{scrollTop}）在修復頁面轉換後不起作用

我有一個我用jQuery Mobile創建的Phonegap應用程序。在我發現this solution之前，原生iOS應用中的頁面轉換非常波動且不一致。它使我的滾動不是很好，所以我根據this follow-up article進行了一些更改。我實現了第二個解決方案

第一個解決方案之後，仍然之後，下面的代碼停在我的應用程序工作：在2.5秒

$('html, body').animate({scrollTop: $('#specificID').offset().top}, 2500);

上面的代碼滾動用戶頁面向下到DIV ID爲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 Mobile的代碼來修復頁面過渡：

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); 
}

我設置3個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）。

謝謝你提供的任何幫助。

來源

2013-02-22 Mark Rummel

雖然我沒去深讀你的問題，我想補充一點滾動動畫作品的文件（準備好），只要頁面不被緩存。換句話說，您可能需要一個獨特的uri，以便jqm將重新加載頁面。 – 2013-11-03 07:55:48

在你的CSS中，你已經將容器的position屬性設置爲Absolute。刪除你的div#container 它應該工作。

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

來源

2013-02-22 20:47:10 DPA

謝謝你的迴應。我看到它在jsFiddle中工作，但不幸的是，它似乎沒有在應用程序內部以這種方式工作。我知道很難排除原生應用程序問題。刪除'＃容器'CSS規則不會對頁面顯示或頁面轉換造成任何問題，但是scrollTop仍然不起作用。我會更詳細地研究你提出的建議，看看我能做些什麼。與此同時，如果您或其他人有任何其他想法 - 那會很棒！ – 2013-02-22 21:21:18

當我構建移動網站時，我遇到了與scrollTop相同的問題，所以我使用了$ .mobile.silentScroll（position）。 http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html – DPA 2013-02-22 21:30:00

jQuery Mobile：.animate（{scrollTop}）在修復頁面轉換後不起作用

回答

相關問題