Make scroll wheel event scroll only once

Question

I have some code that slides the next div into view on mouse wheel scroll and hides the previous one. The problem is the mouse scroll is too sensitive and when using the scroll it scrolls more than once. Is there a way to make the scroll action only fire once?

See the example below of what I mean, scroll to the bottom div4 then scroll back to the top again.

 window.addEventListener('wheel', function(e) { if (e.deltaY < 0) { if ($('#div1').is(':visible')) { $('#div1').hide("slide", { direction: "up" }, 500); $('#div2').show("slide", { direction: "down" }, 500); } else if ($('#div2').is(':visible')) { $('#div2').hide("slide", { direction: "up" }, 500); $('#div3').show("slide", { direction: "down" }, 500); } else if ($('#div3').is(':visible')) { $('#div3').hide("slide", { direction: "up" }, 500); $('#div4').show("slide", { direction: "down" }, 500); } } if (e.deltaY > 0) { if ($('#div2').is(':visible')) { $('#div2').hide("slide", { direction: "down" }, 500); $('#div1').show("slide", { direction: "up" }, 500); } else if ($('#div3').is(':visible')) { $('#div3').hide("slide", { direction: "down" }, 500); $('#div2').show("slide", { direction: "up" }, 500); } else if ($('#div4').is(':visible')) { $('#div4').hide("slide", { direction: "down" }, 500); $('#div3').show("slide", { direction: "up" }, 500); } } });

 #div1 { height: 100px; background: #f00; color: #fff; } #div2 { display: none; height: 100px; background: #394; color: #fff; } #div3 { display: none; height: 100px; background: #859; color: #fff; } #div4 { display: none; height: 100px; background: #487; color: #fff; }

 <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="div1">div 1</div> <div id="div2">div 2</div> <div id="div3">div 3</div> <div id="div4">div 4</div>

Answer 1

You could add some flag to control if there is animation or not. Turn this variable to true when animation is started, and make it false when it is complete. In event listener add check for this variable, and if it is true then do not do anything.

I've upgraded your example a little bit, check it out:

 let active = 1; let isAnimating = false; let duration = 500; function onComplete() { isAnimating = false; } window.addEventListener('wheel', function(e) { if (isAnimating) return; // If element is animating then do nothing, just return let $active = $('#div' + active); let nextActiveIndex = active + 1; if (e.deltaY < 0) { nextActiveIndex = active + 1; } else { nextActiveIndex = active - 1; } let $nextActiveDiv = $("#div" + nextActiveIndex); if (.$nextActiveDiv;length) return, // If there is no element; just return isAnimating = true, // Begin animation. turn to true $active,hide('slide': {direction, 'up'}, duration; onComplete). $nextActiveDiv,show('slide': {direction, 'down'}, duration; onComplete); active = nextActiveIndex; // Increase or decrease active });

 #div1 { height: 100px; background: #f00; color: #fff; } #div2 { display: none; height: 100px; background: #394; color: #fff; } #div3 { display: none; height: 100px; background: #859; color: #fff; } #div4 { display: none; height: 100px; background: #487; color: #fff; }

 <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="div1">div 1</div> <div id="div2">div 2</div> <div id="div3">div 3</div> <div id="div4">div 4</div>