javascript - 使用 Javascript 的 Metro 水平滚动容器

Question

在使用 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;
 }

Answer 1

您需要使用“Flexbox”。这将为您提供所需的一切: 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 虚拟化。

那个