在Windows 8應用程序中調用應用程序欄會導致滾動的子div跳轉到頂部

我在使用WinJS，JavaScript和HTML構建的Windows8應用程序中遇到了奇怪的行爲。在我執行某個特定頁面，有幾個div的有CSS規則是這樣的：在Windows 8應用程序中調用應用程序欄會導致滾動的子div跳轉到頂部

.col { 
    border: 1px solid none; 
    overflow-x: hidden; 
    overflow-y: auto; 
    height: 100%; 
    margin: 0px; 
    width: 100%; 
}

問題是，當我調用通過右鍵單擊主應用欄，在div的滾動內容捕捉到div的頂部。換句話說，div的滾動位置丟失了。我嘗試了很多方法來解決問題，但沒有出現。如何防止滾動內容在調用應用程序欄時跳來跳去。

謝謝！

來源

2013-04-18 ariestav

建議使用-ms-grid作爲頁面。在這種情況下，應用欄將與div重疊，這也是正常的行爲，您可以在其他應用中看到。

HTML：

<div class="test5 fragment"> 
    <header aria-label="Header content" role="banner"> 
     <button class="win-backbutton" aria-label="Back" disabled type="button"></button> 
     <h1 class="titlearea win-type-ellipsis"> 
      <span class="pagetitle">test page</span> 
     </h1> 
    </header> 
    <section class="content" aria-label="Main content" role="main"> 
     <div class="test-content"> 
      Text here. 
     </div> 
    </section> 
</div> 
<div id="appbar" data-win-control="WinJS.UI.AppBar"> 
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button> 
</div>

CSS：

.test5.fragment section[role=main] { 
    display: -ms-grid; 
    -ms-grid-rows: 1fr; 
    -ms-grid-columns: 1fr; 
}

來源

2013-04-19 03:46:30 Sushil

或者我會檢查你所展示的div上的z-index - 很可能它並不是絕對顯示的，所以它在顯示新元素時只是推開它。 – imaginethepoet

@Sushil是正確的。 AppBar是一個覆蓋控件，所以你應該把它放在片段div旁邊，而不是放在裏面。 @ Sushil的代碼顯示瞭如何去做。

在片段內放置一個appbar會導致性能損失，因爲每次用戶導航到該頁面時都需要渲染它。另一個不受歡迎的副作用是所有輸入到appbar將傳播到片段。這是你面臨的問題。

從理論上講，您可以聽取鼠標，鍵盤，觸摸的各種輸入事件並調用preventDefault。但不推薦。

來源

2013-04-25 06:34:02

在Windows 8應用程序中調用應用程序欄會導致滾動的子div跳轉到頂部

回答

相關問題