iPhone Scroll images horizontally like in AppStore

Question

Hi there,

I was wondering if it's possible to create a HTML div container with some CSS magic that shows a horizontal scrollbar like the one with the screenshots on the iTunes preview on the web. I want this to work in Safari on the iPhone.

e.g. http://itunes.apple.com/app/super-monkey-ball/id281966695?mt=8

I would like to use that to display thumbnails in an UIWebView on iPhone. I experimented with the overflow css property but didn't get it to work.

Thanks for your replies.

Answer 1

I don't have time to test it right now, but I think something along the lines of the following should work:

ul#container
{
overflow: hidden;
overflow-x: scroll;
width: 500px; /* or whatever */
height: 200px; /* or whatever */
white-space: nowrap;
}

ul#container li
{
display: inline-block;
width: 100px; /* or whatever */
height: 200px; /* or whatever */
}


<ul id="container">
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item three</li>
  <li>...<!-- you get the point --></li>
</ul>

You might need to use float: left; on the li elements, but I'm not sure. And it maybe depends on the browser you, or your users, will be using.

I'll check this out when I get home, but for now I offer you a demo at: http://jsbin.com/atuvo