不连续滚动 - 检测用户是否停止滚动

Question

我试图检测用户是向上还是向下滚动。但不知道，触控板上的滚动的强度，我想知道他使用跟踪板滚动多少次。

这个想法是复制类似于this的东西，除了当用户向下滚动几次时，它会一直移动到下一张幻灯片（就好像用户使用键盘一样）。

到目前为止，我一直在用这个代码：

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色：白色; }