使滾輪事件僅滾動一次

Question

我有一些代碼可以在鼠標滾輪滾動時將下一個 div 滑入視圖並隱藏前一個。 問題是鼠標滾動太敏感了，使用滾動時它滾動不止一次。 有沒有辦法讓滾動動作只觸發一次？

請參閱下面的示例，滾動到底部div4然后再次滾動回頂部。

 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

您可以添加一些標志來控制是否存在 animation。 animation啟動時將此變量設置為true ，完成后設置為false 。 在事件偵聽器中添加對該變量的檢查，如果為true ，則不執行任何操作。

我已經稍微升級了您的示例，請查看：

 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>