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

Question

我正在尝试检测用户是否向上或向下滚动。但我不想知道触控板上滚动的强度，而是想知道他使用触控板滚动的次数。

这个想法是复制类似this的东西，除了当用户向下滚动几次时，它会继续移动到下一张幻灯片(就像用户正在使用键盘一样)。

到目前为止，我一直在使用这段代码:

var delta = event.originalEvent.wheelDelta;

但这仅检测用户是否正在滚动。

有人知道如何解决这个问题吗？

Answer 1

您可以使用 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-color:白色；}