JQuery實現滑鼠滑動多次,只觸發一次響應事件
阿新 • • 發佈:2019-02-04
正常在設定滑鼠滾輪事件的時候,一次滾動對應一次響應事件。但是按照使用者習慣,使用者一次滑動滑鼠滾輪的動作中,可能實際上滑鼠滾輪滾動了多次(通俗的講,就是使用者不會一下一下的滑動滾輪)。這樣實際上觸發了多次滾輪響應事件,無法達到理想中,使用者滑動一次滾輪,只產生一個動作的效果,影響使用者體驗。
為了解決這一問題,可以設定一個響應事件的觸發條件。
(1)設定一個boolean型的變數作為是否觸發滾輪響應事件的條件。初始值為true。
var doScroll = true;
(2)設定滑鼠監聽事件,當doScroll為true的時候,響應滑鼠滾輪事件。
(3)在響應滑鼠滾輪事件時,將doScroll設定成false,這樣可以保證,無論在這次響應過程中,又發生了多少滑鼠滾動事件,都不會再響應。
(4)當這次滑鼠滾輪響應事件結束後,將doScroll重新設定成true,以響應下一次滾輪事件。
(function(){ var oDiv = document.getElementById('fullpage'); function onMouseWheel(ev) {/*當滑鼠滾輪事件發生時,執行一些操作*/ var ev = ev || window.event; var down = true; // 定義一個標誌,當滾輪向下滾時,執行一些操作 down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0; if(doScroll){ if(down){ if(page_index!=6){ doScroll = false; page_index++; $('#full-page').animate({top:-page_index*screen_height},speed,function() { doScroll = true; }); } }else{ if(page_index!=0){ doScroll = false; page_index--; $('#full-page').animate({top:-page_index*screen_height},speed,function() { doScroll = true; }); } } if(ev.preventDefault){/*FF 和 Chrome*/ ev.preventDefault();// 阻止預設事件 } } return false; } addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); })();
思路大概就是這樣,具體程式碼和使用方法可以參考我的另一篇關於全屏滾動的文章。搭配著看,效果更好。