jQuery Mobile-在changePage上設置目標頁面的滾動位置

Question

我正在使用$.mobile.changePage()方法在jQuery Mobile網站中從Page1導航到Page2。

我想在特定的滾動位置顯示Page2。

目前，使此功能起作用的唯一方法是從該頁面的pageshow事件內調用$(window).scrollTop(this.scrollPosition) 。

問題在於，當顯示Page2時，它首先顯示頁面頂部大約一秒鍾，然后滾動到正確的位置。

我希望能夠在顯示頁面之前設置滾動位置，以便在發生過渡動畫時頁面處於正確的滾動位置。 我嘗試將滾動位置代碼放入pagebeforeshow事件中，但這不起作用。

有辦法可以輕松實現嗎？

感謝您的任何幫助。

Answer 1

介紹

在描述您需要了解的可用解決方案之前，這不是錯誤，也不是完美的解決方案。 問題在於，要為過渡到另一個頁面設置動畫，視口必須位於頁面的頂部，以便當前頁面和在其中過渡的頁面垂直排列。

如果您在一頁上的一長串列表（例如1000像素）的中途，而要傳輸到的頁面只有幾百個像素，則當前頁面將在屏幕上進行適當的動畫處理，但是新頁面將無法顯示為它會在視口上方。

有2種可行的解決方案：

iScroll及其jQuery Mobile派生的iScrollview

iScroll主頁： http ://cubiq.org/iscroll-4

iScrollview主頁： https : //github.com/watusi/jquery-mobile-iscrollview

iScroll是一種JavaScript，可以在Web瀏覽器中的窗口中滾動內容，其行為與在iPhone和Android等移動設備上進行本機滾動非常相似。 這意味着您可以使用類似本機的滾動條和物理原理在瀏覽器中滾動窗口。

這也是我們當前問題的解決方案。 由於iScroll實現，無論列表視圖滾動到多遠，頁面都將占據頁面高度的100％。 這也是為什么返回列表視圖仍將停留在相同位置的原因。

當然，如果要實施此解決方案，則應選擇iScrollview實施。 您仍然可以實現iScroll，但這將花費更多時間。

靜音卷軸

官方文檔： http : //jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

此jQuery Mobile功能也是我們首先遇到此問題的原因。 在觸發頁面轉換之前，原始頁面會靜默滾動到頂部。

在我們的例子中，當選擇listview時，必須在更改頁面之前記住其位置（在這里您將找到在頁面轉換期間存儲的數據/參數的解決方案，只需搜索章節：頁面轉換之間的數據/參數操作）。 在這種情況下，當我們返回上一頁時，可以使用pagebefpreshow事件在顯示頁面之前靜默滾動到底部。

//scroll to Y 100px
$.mobile.silentScroll(100);

這是一個無聲滾動的工作示例： http : //jsfiddle.net/Gajotres/2xfrM/

不幸的是，像您的示例一樣，此解決方案僅適用於頁面展示。 由於jQM體系結構，因此只能在pageshow事件期間執行此操作。

更多信息

如果您想了解有關此主題的更多信息，請閱讀本文 ，您還將找到一些可用的示例。