jQuery鼠标滚轮检测上下滚动

Question

我有几个部分（每个部分大小为100％x 100％-全屏显示），这些部分是固定的，并且使用z-index相互重叠。 我想检测鼠标滚动并使用jQuery显示各个部分（基本上是fullpage.js之类的东西，但是我会有不同的动画）。 我阅读了许多问题，并尝试了以下代码，但不起作用。

使用Javascript：

$(document).ready(function(){
    sections=["intro","features","gallery","contact"]
    cs=0;
    $(window).on('mousewheel DOMMouseScroll', function(e){
        if(e.originalEvent.detail > 0) {
            //scroll down - Show next section
            if(cs < (sections.length-1)){
                $("#"+sections[cs]).fadeOut();
                cs+=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        else{
            //scroll up - Show previous section
            if(cs > 0){
                $("#"+sections[cs]).fadeOut();
                cs-=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        return false;
    });
});

HTML：

<section id="intro">
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>
<section id="features">
    <div class="content">
        <h1>Features</h1>
    </div>
</section>
<section id="gallery">
    <div class="content">
        <h1>Gallery</h1>
    </div>
</section>
<section id="contact">
    <div class="content">
        <h1>Contact Us</h1>
    </div>
</section>

要查看整个代码，以备不时之需 ， 请访问github

Answer 1

所以我检查了jsfiddle https://jsfiddle.net/oobmky4n/中的行为，基本上您的问题似乎是

e.originalEvent.detail

始终为0，而​​是要使用

e.originalEvent.deltaY

我目前仅在野生动物园中对其进行过测试，但它似乎可以正常工作。 似乎也可以通过https://developer.mozilla.org/en-US/docs/Web/Events/wheel反映出来

在连续滚动期间停止停止：

可能的解决方案是带有超时的标志。 我在这里更新了原始文件： https : //jsfiddle.net/oobmky4n/2/如您所见，一旦成功滚动，我们将设置isScrolling 。 在设置标志后250ms不滚动后，我们返回到非滚动状态。

 if(isScrolling) {
    clearTimeout(resetScroll)
    resetScroll = setTimeout(function() {
        isScrolling = false
    }, 250);
  }