jQuery Mausrad erkennen scroll rauf und runter

Question

Ich habe ein paar Abschnitte (jeweils der Größe 100% x 100% - Vollbild), die fest und überlappend übereinander mit Z-Index sind. Ich möchte den Maus-Scroll erkennen und entsprechende Abschnitte mit jQuery anzeigen lassen (im Prinzip etwas wie fullpage.js, aber ich werde verschiedene Animationen haben). Ich habe viele Fragen gelesen und den folgenden Code ausprobiert, funktioniert aber nicht.

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> 

den gesamten Code zu sehen, falls Sie es brauchen, visit github

Answer 1

So überprüfte ich das Verhalten in einer jsfiddle https://jsfiddle.net/oobmky4n/ und im Grunde Ihr Problem scheint zu sein

e.originalEvent.detail 

ist immer 0 und stattdessen wollen Sie

e.originalEvent.deltaY 

ich es jetzt in Safari nur getestet verwenden, aber es scheint zu funktionieren. scheint auch von https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Addition reflektiert wird während einer kontinuierlichen Rolle zu stoppen:

Eine mögliche Lösung ist ein Flag mit einem Timeout. Ich habe mein Original hier aktualisiert: https://jsfiddle.net/oobmky4n/2/ Wie Sie sehen können, stellen wir isScrolling einmal ein erfolgreiches Scroll passiert. Nach 250 ms ohne Scrollen, während das Flag gesetzt ist, kehren wir in einen nicht scrollenden Zustand zurück.

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