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>