iPhone在AppStore中水平滚动图像

我想知道是否有可能创建一个HTML div容器，其中包含一些CSS魔术，它显示了一个水平滚动条，就像网络上iTunes预览中的屏幕截图一样。我希望这可以在iPhone上的Safari中工作。iPhone在AppStore中水平滚动图像

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

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

感谢您的回复。

2010-04-28 schaechtele

我没有时间，现在来测试它，但我想沿着以下线的东西应该工作：

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

来源

2010-04-28 11:47:28

谢谢您的回答！在Firefox上，Mac上的Safari浏览器工作正常，但如果我在iPhone上打开演示，则不会显示滚动条。你只会看到第1项到第5项。 – schaechtele 2010-04-28 12:01:20

@schaechtele，对不起，它需要很长时间才能做出回应，但我可以找到一个iPhone允许在一个元素内滚动的唯一方法是用两个手指拖动......这是疯狂的，并且仍然不显示滚动条（这是使用移动Safari，Opera for iPhone甚至不允许使用“空格：nowrap”）。 – 2010-04-28 18:35:47

好的谢谢，那么我必须找到另一种解决方案！ – schaechtele 2010-04-29 07:21:35

尝试...... 我们做了很好的组成部分，与jQuery的原理。它很容易使用。

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

有还，如果你想尝试它在iPhone和iPad的作品演示。

干杯，洛伦佐

来源

2010-11-28 00:50:11 lomanf

iScroll是相当真棒也确实不错水平动量滚动：http://cubiq.org/iscroll

来源

2011-02-14 21:36:41 Chris

你可以在这里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>

来源

2012-12-24 13:17:59 Anton

iPhone在AppStore中水平滚动图像

回答

相关问题