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

Я использую плагин 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();
}

javascript jquery mousewheel horizontal-scrolling magic-mouse
person Strobel    schedule 13.08.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Fiddle: 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();
}
person Nicklas Nygren    schedule 13.08.2013
comment
Это заставило меня почувствовать себя действительно глупо, ха-ха. Спасибо за ответ, работает отлично, я внес небольшие изменения в соответствии со своими потребностями. if (deltaY == 0){ event.preventDefault(); } Еще раз спасибо. Я не могу проголосовать за из-за моей репутации новичка, но могу принять как правильный ответ. - person Strobel; 13.08.2013