jQuery mousewheel检测向上和向下滚动

我有几个部分（每个大小100％x 100％ - 全屏），它们是固定的并且使用z-index彼此重叠。我想检测鼠标滚动并使用jQuery显示相应的部分（基本上，像fullpage.js，但我会有不同的动画）。我阅读了很多问题并尝试了下面的代码，但不起作用。jQuery mousewheel检测向上和向下滚动

的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

来源

2017-07-23 Manikiran

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

e.originalEvent.detail

始终为0，而是要使用

e.originalEvent.deltaY

我只测试了它在Safari现在，但它似乎工作。还似乎是由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); 
    }

来源

2017-07-23 13:32:03

当我这样做的时候，它会在一个卷轴中从第一个滑动到最后一个滑动。我希望它在用户滚动时只显示一张幻灯片...无论他滚动多长时间 – Manikiran

我不认为这很容易在本地进行。最简单的方法可能只是在超时时包含一个标志。看看这个可能的解决方案：https://stackoverflow.com/a/14092859/1800184 –

它没有按预期工作，但有些作品！谢谢：） – Manikiran

jQuery mousewheel检测向上和向下滚动

回答

相关问题