Горизонтальные события колесика мыши для вращения левого и правого колеса
Я использую плагин jQuery mousewheel для запуска различных действий для каждого левого и правого колесных шпилек.
Горизонтальная прокрутка колесика Apple Magic Mouse имеет тот же эффект, что и трекпад в большинстве ноутбуков, который вы используете двумя пальцами для прокрутки страницы влево и вправо.
И это действие левой и правой прокрутки запускает страницу назад и вперед по истории. Это происходит во всех основных браузерах (Safari,Chrome,Opera и Firefox).
Вот почему мне нужно preventDefault
прокрутка только при горизонтальной (deltaX) прокрутке.
Я не могу отключить горизонтальное вращение по умолчанию без отключения вертикального тоже.
Вот скрипка, воспроизводящая проблему. Пожалуйста, войдите в нее и запустите горизонтальное колесо мыши или трекпад горизонтальной прокрутки.
$(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% основана на ответе Никласа Нигрена.
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();
}