0

我在使用 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 时跳来跳去。

谢谢！

4

2 回答 2

0

建议对页面使用 -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-19T03:46:30.630 回答
0

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

将 appbar 放置在 Fragment 中会降低性能，因为每次用户导航到该页面时都需要渲染它。另一个不受欢迎的副作用是应用栏的所有输入都将传播到片段。这是您面临的问题。

理论上，您可以监听鼠标、键盘、触摸的各种输入事件，并在它们上调用 preventDefault。但不建议这样做。

于 2013-04-25T06:34:02.983 回答