Инерционная прокрутка OSX, вызывающая mousewheel.js для регистрации нескольких событий mousewheel с малейшим движением прокрутки
У меня есть довольно стандартный экземпляр Flexslider, который яЯ работаю над.FlexSlider хорошо сочетается сjquery.mousewheel.js плагин, позволяющий слайдам перемещаться по событиям колесика мыши.
Тем не менее, Mac OSX и другие используютIntertia» к эффектам прокрутки, что делает практически невозможным прокрутку только одного слайда влево или вправо. Общий эффект заключается в том, что даже малейшее движение прокрутки в этих ситуациях запускает несколько событий колесика мыши и прокручивает ползунок несколько изображений влево или вправо. Очевидно, это можетэто случилось!
Я думаю, что решение заключается в использованииunderscore.js - конкретнодребезга» функция. Однако я'Я относительно неопытен в 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
});
});
К сожалению, я могуt выяснить, как применить функцию 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.
Буду признателен за любую помощь в этом!