Windows 8 在Windows 8应用程序中调用应用程序栏会导致滚动的子div跳转到顶部

我在用WinJS、javascript和HTML构建的Windows8应用程序中遇到了一个奇怪的行为。在我正在实现的特定页面中，有几个div具有如下CSS规则：

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

问题是，当我通过右键单击调用主应用程序栏时，div中的滚动内容会捕捉到div的顶部。换句话说，div的滚动位置丢失。我已经尝试了很多方法来修复，但是没有任何结果。如何防止在调用应用程序栏时滚动的内容跳转

---

谢谢

建议对页面使用-ms网格。在这种情况下，应用程序栏将与div重叠，这是正常的，并且可能是正确的行为，您也可以在其他应用程序中看到

html:

---

@苏希尔是对的。AppBar是一个覆盖控件，所以您应该将它放在fragment div旁边，而不是放在它里面@Sushil的代码显示了如何做到这一点

在片段中放置appbar会导致性能下降，因为每次用户导航到该页面时都需要呈现appbar。另一个不受欢迎的副作用是，appbar的所有输入都将传播到片段。这就是你面临的问题

---

从理论上讲，您可以通过鼠标、键盘、触摸和呼叫来收听各种输入事件。但不建议这样做

或者，我会检查您正在显示的div上的z索引-很可能它不是绝对显示的，所以当一个新元素进入显示时，它只是将其推开。

<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> 

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