0

WinJS、javascript、および HTML を使用して構築している Windows8 アプリで奇妙な動作が発生しました。私が実装している特定のページには、次のような CSS ルールを持つ div がいくつかあります。

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

問題は、右クリックしてメイン アプリ バーを呼び出すと、div 内のスクロールされたコンテンツが div の上部にスナップすることです。つまり、div のスクロール位置が失われます。私は多くの修正方法を試しましたが、何も思いつきませんでした。アプリ バーを呼び出したときに、スクロールされたコンテンツがジャンプしないようにするにはどうすればよいですか。

ありがとう！

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 のコードは、その方法を示しています。

フラグメント内にアプリバーを配置すると、ユーザーがそのページに移動するたびにレンダリングする必要があるため、パフォーマンスが低下します。もう 1 つの望ましくない副作用は、appbar へのすべての入力がフラグメントに伝達されることです。これがあなたが直面している問題です。

理論的には、マウス、キーボード、タッチのさまざまな入力イベントをリッスンし、それらに対して preventDefault を呼び出すことができます。しかし、それはお勧めできません。

于 2013-04-25T06:34:02.983 に答える