0

WinJS/javascript を使用してメトロ アプリケーションで水平スクロール効果を実現する標準的な方法はありますか?

可変幅/高さで動的に追加された複数のdiv があり、オーバーフローしたときにコンテンツが広いときに画面を水平にスクロールしたいとします。どうすればそれを達成できますか?

スクロールラッパーで固定幅のoverflow-x:scrollを使用したくない

<section class="header">
    Header which is always shown in top left corner
</section>
<section class="magic-winjs-scroll-container-class">
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
   <div style="width:300px;height:200px">Some random div which should stack horizontally</div>
</section>

解決：

CSS

.magic-winjs-scroll-container-class {
     display: -ms-flexbox;
     -ms-flex-direction: row;
     -ms-flex-align: center;
 }
4

1 に答える 1

1

「フレックスボックス」を使用する必要があります。これにより、必要なものがすべて提供されます: http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

さらに、さまざまなオプションのインタラクティブな CSS 生成を行うハンズオン ラボがあります: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm

具体的には、行にレイアウトする必要があります。スクロールバーを自動的に表示できるようにするには、overflow: auto が必要です。

その後、フレックスボックスを微調整して、好きなようにレイアウトします。

これが大量のデータの場合は、ListView の使用を検討することをお勧めします。ListView は、これをまったく異なる方法で実現しますが、データと UI の仮想化を可能にします。

ザ

于 2012-08-01T15:20:06.353 に答える