iPhone 像在 AppStore 中一样水平滚动图像答案

【问题标题】：iPhone Scroll images horizontally like in AppStoreiPhone 像在 AppStore 中一样水平滚动图像
【发布时间】：2011-02-13 07:07:34
【问题描述】：

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

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

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

感谢您的回复。

【问题讨论】：

标签： iphone html css uiwebview

【解决方案1】：

我现在没有时间对其进行测试，但我认为以下内容应该可行：

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>

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

我回家后会检查一下，但现在我为您提供一个演示：http://jsbin.com/atuvo

【讨论】：

感谢您的回答！在 Firefox 上，Mac 上的 Safari 运行良好，但如果我在 iPhone 上打开演示，则不显示滚动条。您只能看到第 1 项到第 5 项。
@schaechtele，抱歉花了这么长时间才回复，但我能找到的 iPhone 允许在元素内滚动的唯一方法是用两根手指拖动......这太疯狂了，而且仍然不显示滚动条（这是使用移动 safari，iPhone 版 Opera 甚至不允许 whitespace: nowrap）。

【解决方案2】：

试试这个... 我们做了一个很好的与 jQuery 一起工作的组件。它易于使用。

http://api.mutado.com/mobile/mtdtouch/js/

如果你想尝试的话，还有一个可以在 iPhone 和 iPad 上运行的演示。

干杯，洛伦佐

【讨论】：

【解决方案3】：

iScroll 也非常棒，它可以很好地进行水平动量滚动：http://cubiq.org/iscroll

【讨论】：

【解决方案4】：

你可以在这里http://appradar.ru/

<script src="http://appradar.ru/wp-content/themes/appradar/js/jquery.horizontal.scroll.js"></script> 
    <script type="text/javascript">
        $(document).ready(function(){
            var w = 0, h = 0;
            $('#slider div').each(function(i, index){
                w += $(this).outerWidth(); 
                h = $(this).outerHeight() > h ? $(this).outerHeight() : h;
            });
            $('#slider').width(w).height(h);
            $('#slider-outer').height(h + 8).horizontalScroll();            
        });
    </script>

【讨论】：