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

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

2 个答案: