iPhone прокручивать изображения по горизонтали, как в AppStore

Question

Мне было интересно, возможно ли создать HTML-контейнер div с некоторой магией CSS, которая показывает горизонтальную полосу прокрутки, подобную скриншоту в превью iTunes в Интернете. Я хочу, чтобы это работало в Safari на iPhone.

например. http://itunes.apple.com/app/super-monkey-ball/id281966695?mt=8

Я хотел бы использовать это для отображения миниатюр в UIWebView на iPhone. Я экспериментировал со свойством css переполнения, но он не работал.

Спасибо за ваши ответы.

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

Возможно, вам придется использовать float: left; для элементов li, но я не уверен. И это может зависеть от браузера, который вы или ваши пользователи будете использовать.

Я проверю это, когда вернусь домой, но сейчас я предлагаю вам демонстрацию по адресу: http://jsbin.com/atuvo

Answer 2

Попробуйте это ... Мы сделали хороший компонент, который работает с jQuery. Прост в использовании.

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

Существует также демоверсия, которая работает на iPhone и iPad, если вы хотите попробовать.

Ура, Lorenzo

Answer 3

Вы можете взять его здесь 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>

Answer 4

iScroll также довольно хорош, он делает красивую горизонтальную прокрутку импульса: http://cubiq.org/iscroll