0

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

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

我不希望在滚动包装器上使用具有固定宽度的溢出-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

您需要使用“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

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

在那之后，一切都归结为调整 flexbox 以使其按您想要的方式布局。

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

这

于 2012-08-01T15:20:06.353 回答