12 марта 2016
Во-первых нужно качнуть библиотеку отсюда
Во-вторых нужно ее подключить, указав родительский блок в котором будет использована прокрутка, например имеем:
<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;}
Вот и все. Спасибо АНАТОЛИЙ ПАШИН за разбор полетов.