當網址欄更改可見性時頁面滾動到頂部

我在Android上使用Google Chrome時構建了適用於移動設備的網站。我正在使用jQuery Mobile的面板功能在我的網站左側添加隱藏菜單。當菜單被隱藏時，我可以毫無問題地在頁面上下滾動，這樣做會導致瀏覽器頂部的URL欄進入和退出視圖。這是按預期工作的。當網址欄更改可見性時頁面滾動到頂部

但是，一旦我展開隱藏的菜單面板並向下滾動，每當URL欄更改可見性時，頁面會自動回滾到頂部。如果向下滾動（向上推動頁面）並隱藏欄，則會滾動回頂部。現在酒吧已隱藏，我可以向下滾動而不會出現問題。一旦我再次向後滾動（拉下頁面，顯示URL欄），頁面就會再次回到頂部。現在，我處於頁面的頂部（過去我想滾動到的位置），我必須再次向下滾動，這又一次隱藏了URL欄，並將頁面捕捉到頂部。只要我的滾動交替顯示和隱藏之間的URL欄就會重複。真氣。

我懷疑這與設備視口大小的變化有關，但我不太確定。有誰知道是什麼原因造成的，或者更重要的是，如何解決這個問題？

這裏是我的代碼的要點：

<div id="container" class='' align="left" data-role="page" data-ajax="false"> 
    <div data-role="header"><!-- my header --></div> 
    <div id="myHiddenPanel" class='ui-panel' data=role="panel" data-position="left" data-display="reveal"><!-- Tall menu options --></div> 
    <div id="mainContent" class="ui-content"><!-- Tall Main content --></div> 
</div>

請注意，我還使用引導這個網站，但它沒有被用於具體這些元素。

來源

2016-02-12 AaronK

那麼，我很驚訝，我找到了解決這個問題的方法。

根據this post，這可能是jQuery Mobile中的一個bug。這很容易通過編輯.js文件或通過添加自己的版本來覆蓋該小部件。

我使用縮小的版本，所以我可以用這個

...e.resetActivePageHeight(d)),b/*&&this.window[0].scrollTo(0,a.mobile.defaultHomeScroll)*/):c._fixPanel()},_bi...

更換的代碼

...e.resetActivePageHeight(d)),b&&this.window[0].scrollTo(0,a.mobile.defaultHomeScroll)):c._fixPanel()},_bi...

此位來解決它只要搜索在精縮jQuery Mobile的那個片段來替換它，或者如果您使用的是非壓縮版本，請按照鏈接頁面上的說明進行操作。

來源

2016-02-12 19:42:25 AaronK

更正，只要該URL出現/消失，就會觸發一個[_positionPanel]方法[bugged]（https://github.com/gabrielschulhof/jquery-mobile/commit/182466906313212b6bc0ab094bc765afd20269cf） – Aboodz

當網址欄更改可見性時頁面滾動到頂部

回答

相關問題