Во-первых нужно качнуть библиотеку отсюда

Во-вторых нужно ее подключить, указав родительский блок в котором будет использована прокрутка, например имеем:

<div id="myId" class="myClass">
    <img src="#">
    <img src="#">
    <img src="#">
    <img src="#">
</div>

Вызов функции происходит по:

$('#wrapper')
  .mousewheel(function (event, delta) {
  //code
});

Для нашего примера прикрутим горизонтальную прокрутку изображений

$('.myClass')
    .data('scrollLeft', -1) //для предотвращения блокировки вертикального скролла
    .mousewheel(function (event, delta) {
        if ( (!this.scrollLeft && delta > 0) || (this.scrollLeft == $(this).data('scrollLeft') && delta < 0) ) {
           return true; //данный блок необходим для того, чтобы перестать блокировать вертикальный скролл, если горизонтальный закончился
        }

        $(this).data('scrollLeft', this.scrollLeft); //сохраняем текущий скролл слева

        this.scrollLeft -= (delta * 300); //на сколько прокрутить блок? (размер скролла)
        return false; //отключить вертикальный
});

CSS:

#myId {white-space: nowrap;overflow-x:scroll;}
#myId img {height:auto; max-width: 100%; display: inline; margin: 10px;}

Вот и все. Спасибо АНАТОЛИЙ ПАШИН за разбор полетов.

Аватар пользователя antidenantiden
14 марта 20161