Горизонтальные события колесика мыши для вращения левого и правого колеса

Я использую плагин jQuery mousewheel для запуска различных действий для каждого левого и правого колесных шпилек.

Горизонтальная прокрутка колесика Apple Magic Mouse имеет тот же эффект, что и трекпад в большинстве ноутбуков, который вы используете двумя пальцами для прокрутки страницы влево и вправо.

И это действие левой и правой прокрутки запускает страницу назад и вперед по истории. Это происходит во всех основных браузерах (Safari,Chrome,Opera и Firefox).

Вот почему мне нужно preventDefault прокрутка только при горизонтальной (deltaX) прокрутке.

Я не могу отключить горизонтальное вращение по умолчанию без отключения вертикального тоже.

Вот скрипка, воспроизводящая проблему. Пожалуйста, войдите в нее и запустите горизонтальное колесо мыши или трекпад горизонтальной прокрутки.

http://jsfiddle.net/YfwXw/

$(document).mousewheel(function(event, delta, deltaX, deltaY) {
    if (deltaX > 10){
        $(".square").addClass("animation");
    }else if(deltaX < -10){
        $(".square").removeClass("animation");
    }
    if (deltaY != 0){
        //Anything that makes vertical wheelscroll keeps normal
    }
    // I have to preventDefault only the horizontal scroll, otherwise page will go back or go forward in history
    event.preventDefault();
});

Вы можете видеть, что я поместил некоторые комментарии в коде, которые помогут вам лучше понять мою проблему.

В основном все, что мне нужно, это что-то preventDefault действие горизонтального колеса и оставить вертикальное колесо по умолчанию.

Более 30 часов в поисках решения безуспешно, поэтому я буду признателен за любую помощь, теперь у меня действительно нет вариантов.

Новая скрипка с решением на 99% основана на ответе Никласа Нигрена.

http://jsfiddle.net/9VbgF/

if (deltaY == 0){
    event.preventDefault();
}

1 ответ

Решение

Скрипка: http://jsfiddle.net/YfwXw/1/

Ты делаешь preventDefault на все события колесика мыши. Вместо этого оберните его в свой оператор if, и он будет работать:

if (deltaY != 0){
    // Anything that makes vertical wheelscroll keeps normal
} else {
    // Only prevent if scroll is not vertical
    event.preventDefault();
}
Другие вопросы по тегам