Инерционная прокрутка OSX, вызывающая mousewheel.js для регистрации нескольких событий mousewheel с малейшим движением прокрутки
У меня есть довольно стандартный экземпляр Flexslider, над которым я работаю.FlexSlider хорошо сочетается сjquery.mousewheel.js плагин, позволяющий слайдам перемещаться по событиям колесика мыши.
Однако Mac OSX и другие используют «intertia» для прокрутки эффектов, что делает практически невозможным прокрутку только одного слайда влево или вправо. Общий эффект заключается в том, что даже малейшее движение прокрутки в этих ситуациях запускает несколько событий колесика мыши и прокручивает ползунок несколько изображений влево или вправо. Очевидно, этого не может быть!
Я думаю, что решение заключается в использованииunderscore.js - в частности, функция «debounce». Тем не менее, я относительно неопытен в JS / jQuery и не могу понять, как это реализовать.
Из документации подчеркивания:
Debounce: _.debounce(function, wait, [immediate])
Создает и возвращает новую отклоненную версию переданной функции, которая будет откладывать выполнение до истечения миллисекунд ожидания с момента последнего вызова. Полезно для реализации поведения, которое должно происходить только после того, как ввод прекратил поступать. Например: предварительный просмотр комментария к Markdown, пересчет макета после того, как размер окна перестал изменяться, и так далее.
Передайте true для непосредственного параметра, который заставит debounce вызвать функцию в начале, а не в конце интервала ожидания. Полезно при таких обстоятельствах, как предотвращение повторного двойного нажатия кнопки «Отправить» во второй раз.
var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
Вот код, который я использую для инициализации flexslider:
// MOUSEWHEEL FIX:
function debounceEffect() { // apply debounce to mousewheel here
}
// Initialize FlexSlider
$(window).load(function() {
$('div.flexslider').flexslider({
animation:'slide',
controlNav:true,
mousewheel:true,
pauseOnHover:true,
direction:'horizontal',
animationSpeed:500,
slideshowSpeed:5000,
after:debounceEffect
});
});
К сожалению, я не могу понять, как применить функцию debounce к событию mousewheel. Я думаю, что просто недостаточно хорошо понимаю движущиеся части.
Здесьсоответствующий фрагмент кода из плагина flexslider:
// MOUSEWHEEL:
if (vars.mousewheel) {
slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
event.preventDefault();
var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, vars.pauseOnAction);
});
}
Я могу отредактировать это, включив в него часть кода плагина mousewheel, если это важно, или вы можете проверить это наGitHub.
Буду признателен за любую помощь в этом!