it-roy-ru.com

Горизонтальная прокрутка с колесиком мыши на горизонтальном списке

Я пытаюсь выполнить горизонтальную прокрутку с помощью колесика мыши, но, похоже, это не работает.

Вот мой Fiddle

Мой основной класс .selector - это класс с прокруткой overflow

Это JS, я пытаюсь инициализировать свиток с 

 $('.selector').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
});

Это пример, который я использую для горизонтальной прокрутки https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Заранее благодарю за любую помощь!

EDIT: Спасибо всем, я забыл jQuery в Fiddle, да, извините, но когда я тестировал на localhost, я использовал jQuery 1.11.1, так что, возможно, так оно и было. Ура ребята

5
Sanction

Вы просто забыли добавить JQuery в ваш HTML

http://jsfiddle.net/902tjbzz/

jquery.js: http://code.jquery.com/jquery-2.1.4.min.js

6
Aelios

Попробуйте это :

$('.selector').mousewheel(function(e, delta) {
    $(this).scrollLeft(this.scrollLeft + (-delta * 40));
    e.preventDefault();
});

Кроме того, вы не включили jQuery в свою скрипку.

ПРАВКА

На самом деле, единственная проблема заключалась в том, что вы не включили jQuery, ваш исходный код работает нормально.

5
Arg0n

Первое: в вашем jsfiddle вы забыли включить jquery.

Второе: я изменил $('.selector').mousewheel(function(e, delta) { на $('.selector').on("mousewheel", function(e, delta) { и только тогда я увидел, что это событие вызвано.

Также проверьте логику обновления свойства scrollLeft. Не забывайте о направлении (слева, справа), поэтому в некоторых случаях вы должны добавить значение, а не вычесть его

1
Andrew