使用 Javascript 的 Metro 水平滚动容器答案

【问题标题】：Metro horizontal scrolling container using Javascript使用 Javascript 的 Metro 水平滚动容器
【发布时间】：2012-08-01 08:58:53
【问题描述】：

有没有一种标准的方法可以使用 WinJS / javascript 在 Metro 应用程序中实现水平滚动效果？

假设我有多个 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;
 }

【问题讨论】：

标签： javascript html css microsoft-metro winjs

【解决方案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，以使其允许您自动显示滚动条。

在那之后，一切都归结为调整 flexbox 以使其布局成你想要的样子。

请注意，如果这是处理大量数据，您可能需要考虑使用 ListView，它以完全不同的方式实现这一点，但允许数据和 UI 虚拟化。

那个

【讨论】：

谢谢！我会检查并回复你。你有任何使用 flexbox 的代码示例（css）吗？
是的，MSDN 链接为不同场景提供了示例。我还在交互式页面上添加了一个链接，可帮助您可视化不同的选项，并生成您需要的 CSS。
请注意，示例使用 -ms-box，但在 WinJS 中是 -ms-flexbox
郑重声明，MSFT 对这种非常基本的类东西的帮助和指导是可怕的。试图弄清楚这些东西真是浪费时间。