Разрывная прокрутка - определить, прекратил ли пользователь прокрутку

Question

Я пытаюсь определить, прокручивает ли пользователь вверх или вниз. Но вместо того, чтобы знать интенсивность прокрутки на трекпаде, я хочу знать, сколько раз он использовал трекпад для прокрутки.

Идея состоит в том, чтобы воспроизвести нечто похожее на это, за исключением того, что когда пользователь несколько раз прокручивает страницу, он продолжает переходить к следующему слайду (как если бы пользователь использовал клавиатуру).

До сих пор я использовал этот код:

var delta = event.originalEvent.wheelDelta;

Но это только обнаруживает, прокручивает ли пользователь или нет.

У кого-нибудь есть идеи как это исправить?

Answer 1

Вот jsfiddle, который показывает, как это сделать - http://jsfiddle.net/y6Ev5/

Это то, что здесь происходит -

1. Detect scroll start 
2. Stop event from propagating.
3. Scroll programmatically to the next page. While scrolling,cancel all scroll events.

Answer 2

Вы можете использовать setTimeout и clearTimeout, чтобы заставить только одно движение для одного скольжения колеса мыши. Вот пример, просто измените переменную SLIDE_TIMEOUT, чтобы получить другие результаты. http://jsfiddle.net/s6hU8/1/

JAVASCRIPT

var SLIDE_TIMEOUT = 100;
var slides = document.getElementsByClassName("slide");
var slideIndex = slides.length - 1;
var evtSlide = null;
var upOrDown = 0;
window.addEventListener("mousewheel", handleWheel, false);
window.addEventListener("DOMMouseScroll", handleWheel, false);

function handleWheel(e) {
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    upOrDown = delta;
    if(evtSlide)
        window.clearTimeout(evtSlide);
    evtSlide = window.setTimeout(handleSlide, SLIDE_TIMEOUT);
}

function handleSlide() {
    var offset = upOrDown, newIndex = slideIndex;
    newIndex = (newIndex + offset + slides.length) % slides.length;
    console.log(newIndex);
    slides[slideIndex].style.zIndex = 1;
    slides[newIndex].style.zIndex = 2;
    slideIndex = newIndex;
}

HTML

<div class="slide"><h1>9</h1></div>
<div class="slide"><h1>8</h1></div>
<div class="slide"><h1>7</h1></div>
<div class="slide"><h1>6</h1></div>
<div class="slide"><h1>5</h1></div>
<div class="slide"><h1>4</h1></div>
<div class="slide"><h1>3</h1></div>
<div class="slide"><h1>2</h1></div>
<div class="slide"><h1>1</h1></div>

CSS

.slide {
    position:absolute;
    left:0;top:0;right:0;bottom:0;
    padding:0;margin:0;
    text-align:center;
    font-size:200%;
    bac

kground цвет: белый; }