javascript - 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>

要查看完整代码，以备不时之需，visit github

Answer 1

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

e.originalEvent.detail

始终为 0 而您想使用

e.originalEvent.deltaY

我现在只在 safari 中测试过它，但它似乎有效。似乎也反射(reflect)了 https://developer.mozilla.org/en-US/docs/Web/Events/wheel

添加在连续滚动期间停止:

一个可能的解决方案是带有超时的标志。我在这里更新了我的原文:https://jsfiddle.net/oobmky4n/2/如您所见，一旦成功滚动，我们就会设置 isScrolling。在设置标志后 250 毫秒不滚动后，我们恢复到非滚动状态。

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