iPhone滚动图像水平像在AppStore [英] iPhone Scroll images horizontally like in AppStore

问题描述

我想知道是否可以创建一个HTML div容器与一些CSS魔术，显示一个水平滚动条，如在iTunes预览上的屏幕截图。我想要在iPhone上的Safari中使用它。

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.

例如。 http://itunes.apple.com/app/super- monkey-ball / id281966695？mt = 8

我想使用它在iPhone上的UIWebView中显示缩略图。我尝试了overflow css属性，但没有让它工作。

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.

感谢您的回复。

推荐答案

我没有时间来测试它，现在，但我认为一些沿着下面的线应该工作：

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>

您可能需要使用 float：left; 在 li 元素，但我不确定。这可能取决于您或您的用户将使用的浏览器。

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.

当我回家时，我会检查这个，但现在我给你演示： http://jsbin.com/atuvo

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

这篇关于iPhone滚动图像水平像在AppStore的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！