Question

我在使用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的滚动位置丢失了。我已经尝试了很多方法来修复，但什么都没有出现。如何在调用App Bar时阻止滚动内容跳转。

谢谢！

Answer 1

建议为页面使用-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;
}

Answer 2

@Sushil是对的。 AppBar是一个叠加控件，所以你应该将它放在片段div旁边，而不是放在它里面。 @ Sushil的代码显示了如何做到这一点。

在片段中放置一个appbar会产生性能损失，因为每次用户导航到该页面时都需要渲染它。另一个不良副作用是appbar的所有输入都将传播到片段。这是你面临的问题。

理论上，您可以收听各种输入事件，包括鼠标，键盘，触摸和调用preventDefault。但不建议这样做。

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

2 个答案: