Кросбраузерный скроллинг с библиотекой iscroll 5

1. Сайт автора  и небольшая инструкция http://cubiq.org/iscroll-5-ready-for-beta-test

2. Ссылка на GitHub https://github.com/cubiq/iscroll

3. Очень интересный пример, в котором добавляется горизонтальная прокрутка при помощи iscroll, но при этом сохраняется нативная вертикальная прокрутка. Такую реализацию удобно использовать, если приложение будет запускаться на мобильном устройстве.

 http://lab.cubiq.org/iscroll5/demos/event-passthrough/

Как создать скроллер при помощи IScroll

Создается скроллер следующим образом

HTML

<div  id='wrapper'>
  <div id="scroller">
    <ul>
      <li>Super Cell 1</li>
      <li>Super Cell 2</li>
      <li>Super Cell 3</li>
      <li>Super Cell 4</li>
      <li>Super Cell 5</li>
      <li>Super Cell 6</li>
      <li>Super Cell 7</li>
      <li>Super Cell 8</li>
    </ul>
  </div>
</div>

JavaScript

myScroller  = new IScroll('#wrapper', { 
  eventPassthrough: true, scrollX: true, scrollY: false 
});

CSS
Для того чтобы все прокручивалось и занимало определенные размеры необходимо задать стили элементам которые участвуют в создании скроллера.

Стили необходимо применить к 4 элементам

1. wrapper - это обертка в которую будет завернут сам скроллер.

2. scroller - это непосредственно сам элемент скроллера

3. scroller ul - список  

4. scroller li - элемент списка 

#wrapper {
 position: relative;
 z-index: 1;
 height: 160px;
 width: 100%;
 background: #ccc;
 overflow: hidden;
 -ms-touch-action: none;
}
 
#scroller {
 position: absolute;
 z-index: 1;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 width: 2400px;
 height: 160px;
 -webkit-transform: translateZ(0);
 -moz-transform: translateZ(0);
 -ms-transform: translateZ(0);
 -o-transform: translateZ(0);
 transform: translateZ(0);
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-text-size-adjust: none;
 -moz-text-size-adjust: none;
 -ms-text-size-adjust: none;
 -o-text-size-adjust: none;
 text-size-adjust: none;
}
 
#scroller ul {
 list-style: none;
 width: 100%;
 padding: 0;
 margin: 0;
}
 
#scroller li {
 width: 120px;
 height: 160px;
 float: left;
 line-height: 160px;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 background-color: #fafafa;
 font-size: 14px;
 overflow: hidden;
 text-align: center;
}

События IScroll

1. scrollEnd - вызывается, когда скроллинг заканчивается 

myScroller.on('scrollEnd', function () {
  // some actions when scrolling has ended
});

Методы IScroll

1. scrollTo(x, y) - скролит до определенной координаты

myScroller.scrollTo(- el.offsetWidth * this.currentPage.pageX, 0);

2. goToPage(horizontalPage, verticalPage) - скролит на определенную страницу

myScroller.goToPage(2, 0);