1. Zuhause
  2. Frage und Antwort
  3. Mausrad Scroll Ereignis Feuer nur einmal pro Scroll-Sitzung

Mausrad Scroll Ereignis Feuer nur einmal pro Scroll-Sitzung

2016-04-09 22 views
3

Ich versuche, die Funktionalität der folgenden Website nachzuahmen: www.verbaasd.net. Jede Scroll-Sitzung löst nur eine Aktion aus.Mausrad Scroll Ereignis Feuer nur einmal pro Scroll-Sitzung

Jedes Mal, wenn ein Benutzer nach unten scrollt, wird abhängig vom Status der Variablenanzahl eine Aktion ausgeführt. Ich möchte nur, dass dies EINMALIG pro Rolle geschieht. Zum Beispiel, wenn ein Benutzer ein Macbook mit Touchpad hat, wird es mehrfach sehr weit feuern. Die Zählung wird ziemlich sofort von 1 bis 4 gehen. Gibt es eine Möglichkeit, ein Timeout oder etwas einzustellen, so dass es für 0,5 Sekunden stoppt, wenn die Variablenanzahl um 1 erhöht oder verringert wird?

Aktuelle Code:

var count = 1; 

$(window).on('mousewheel DOMMouseScroll', function(e) { 
    if (e.originalEvent.wheelDelta/120 > 0) { 
    count -= 1; 
    } else { 
    count += 1; 
    } 
    if (count < 1) count = 1; 
    if (count > 4) count = 4; 

    switch (count) { 
    case 1: 
     // do something 
     break; 
    case 2: 
     // do something 
     break; 
    case 3: 
     // do something 
     break; 
    case 4: 
     // do something 
     break; 
    } 

    $(".cd-background-wrapper").attr("data-slide", count); 

});

Quelle

2016-04-09 elw

+3

https://stackoverflow.com/questions/25860108/jquery-page-scroll-event-logic-how-to- throttle – Burimi

+1

https://css-tricks.com/the -Differenz zwischen Throttling-and-Debounce/ –

+0

Danke! Underscore konnte nicht funktionieren, aber lodash funktioniert gut. Vielen Dank! – elw

Antwort

1

Ich empfehle andere Art und Weise.

Sie sollten 'preventDefault' verwenden und den Effekt mit setTimeout verzögern.

Ich schrieb einen einfachen Prototyp-Code unter dem Link. (nur auf Chrome und Safari getestet)

http://codepen.io/nigayo/pen/PNEvmY

[HTML]

<body> 
    <div id="wrap"> 
    <section>section A</section> 
    <section>section B</section> 
    <section>section C</section> 
    <section>section D</section> 
    </div> 
</body>

[CSS]

body { 
    overflow: hidden; 
    height: 100%; 
} 

#wrap { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    top: 0; 
} 

section { 
    width: 100%; 
    height: 600px; 
} 

section:nth-child(1) { 
    background: red; 
} 
section:nth-child(2) { 
    background: blue; 
} 

section:nth-child(3) { 
    background: green; 
} 
section:nth-child(4) { 
    background: magenta; 
}

[JavaScript]

(function() { 
    var currentPanel = 1; 
    var wrap = $('#wrap'); 
    var panelsize = 600; 
    var step = 10; 
    var interval = 1000; 
    var direction = 1; 

    var bAnimation = false; 

    function animation() { 
    setTimeout(function() { 
     var currentTop = parseInt(wrap.css("top")); 

     if (direction < 0) { 
     if (currentTop <= minValue) { 
      setTimeout(function() { 
      bAnimation = false; 
      }, interval); 
      return; 
     } 
     } else { 
     if (currentTop >= minValue) { 
      setTimeout(function() { 
      bAnimation = false; 
      }, interval); 
      return; 
     } 
     } 

     wrap.css({ 
     "top": currentTop - step 
     }); 
     animation(); 
    }, 16); 
    } 

    $(window).bind('mousewheel DOMMouseScroll', function(event) { 
    event.preventDefault(); 
    if (bAnimation) return; 

    var currentTop = parseInt(wrap.css("top")); 

    if (event.originalEvent.wheelDelta < 0) { 
     //down scroll 
     minValue = currentTop - panelsize; 
     step = 10; 
     direction = -1; 
    } else { 
     //up scroll 
     minValue = currentTop + panelsize; 
     step = -10; 
     direction = 1; 
    } 

    console.log(minValue, bAnimation); 
    bAnimation = true; 
    animation(); 
    }); 
})();

Wenn Sie sich auf meine Codes beziehen, sollten Sie 'jquery animate function' oder 'requestAnimationframe' für die Animationslogik verwenden.

Quelle

2016-04-09 10:12:56 superui

Verwandte Themen

 Verwandte Themen