Question

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

假设我有多个div 动态添加并且宽度/高度可变，我希望屏幕在溢出时内容更宽时水平滚动，我将如何实现这一目标？

我不想在滚动包装上使用overflow-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;
 }

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

具体来说，你会希望它按行排列。您仍然需要溢出：auto，以使其允许您自动显示滚动条。

在此之后，完全可以调整flexbox，使其按照你想要的方式进行布局。

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

使用Javascript的Metro水平滚动容器

1 个答案: