Question

Is there a standard way to achieve the horizontal scrolling effect in metro applications using WinJS / javascript ?

Say I have mulitple divs added dynamically with variable width/height and I want the screen to scroll horizontally when the content is wider when overflowing, how would I go about to achieve that?

I would prefer not to use overflow-x:scroll with a fixed width on a scroll wrapper

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

Solution:

CSS

.magic-winjs-scroll-container-class {
     display: -ms-flexbox;
     -ms-flex-direction: row;
     -ms-flex-align: center;
 }

Answer 1

You need to use a “Flexbox”. This will give you everything that you need:
http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

Additonally, there is a hands on lab with interactive CSS generation for the different options:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm

Specifically, you’ll want it to lay out in rows. You will still need overflow: auto, to make it allow you to show scrollbars automatically.

After that, it’s all down to tweaking the flexbox to make it layout how you would like it.

Note, that if this is for lots of data, you might want to consider using the ListView, which achieves this in a completely different way, but allows for data & UI virtualization.

THe