使用JavaScript的Metro水平滾動容器

有沒有一種標準的方式來實現使用WinJS/javascript的Metro應用程序中的水平滾動效果？使用JavaScript的Metro水平滾動容器

說我有多個div 動態添加與可變寬度/高度，我希望屏幕水平滾動時內容更廣泛時溢出，我將如何去實現呢？

我寧願不使用溢出-X：有一個固定的寬度滾動卷軸包裝

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

來源

2012-08-01 Sindre

您需要使用「Flexbox」。這會給你你需要的一切： http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

Additonally，對互動CSS新一代實驗室動手了不同的選擇： http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm

具體來說，您希望它在行佈局。您仍然需要使用overflow：auto，以使您可以自動顯示滾動條。

之後，所有這一切都需要調整flexbox以使其佈局如何。

請注意，如果這是針對大量數據的，您可能需要考慮使用ListView，它以完全不同的方式實現此目的，但允許數據& UI虛擬化。

的

來源

2012-08-01 15:20:06

謝謝！我會檢查出來並回復給你。你有沒有使用flexbox的代碼示例（css）？ – Sindre 2012-08-01 18:10:01

Yeha，MSDN鏈接已經爲不同的場景創建了示例。我還在交互式頁面上添加了一個指向手的鏈接，幫助您可視化不同的選項並生成您所需的CSS。 – 2012-08-01 21:14:00

謝謝！ Flexbox的訣竅:) – Sindre 2012-08-03 06:34:15

使用JavaScript的Metro水平滾動容器

回答

相關問題