2014-02-25 75 views
10

無論用什麼方法檢測頁面上的滾動,該事件都會觸發兩次。請參閱我嘗試的不同方法的代碼。觸發兩次的window.scroll事件

<body onmousewheel="alert('Why are you alerting twice?')"> 

<script src="js/jquery-1.8.3.min.js"></script> 
<script> 
$(window).scroll(function(){ 
    alert("Why are you alerting twice?"); 
}); 
</script> 

window.onscroll = please_scroll; 

function please_scroll() { 
     alert("Why are you alerting twice?"); 
    } 

使用$ .debounce我甚至試過。

如果它有任何用處,我將解釋我正在嘗試做什麼: 當用戶向上或向下滾動滾輪時,頁面將動畫滾動到下一個全寬度內容div。我的代碼已經成功地完成了我的菜單的這個按鈕,但我也希望在用戶滾動時發生,實際上會自動幫助他們滾動頁面的每個部分。這是我目前用於滾動的功能:

function scrollTo(id){ 
    // Scroll 
    $('html,body').animate({scrollTop: $("#"+id).offset().top - 110},'slow',function(){ 
    animation_active = "false"; 
    }); 
} 
+0

首先之間的事情,應該是:'window.onscroll = please_scroll;'其次,你不應該不要使用警報來調試事件 –

+0

以及鼠標滾輪和其他像蘋果鼠標一樣的使用時可以更頻繁地觸發滾動事件。你必須使用超時爲 – Alex

回答

12

許多設備可以觸發滾動事件,而這些滾動事件似乎更頻繁地發生。只需提供一個超時:

var timeout; 

$(window).scroll(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     // do your stuff 
    }, 50); 
}); 

您可以用價值50玩,我建議50和150

+0

我剛花了4個小時試圖調試這個,你似乎已經解決了我的問題直接了當。哇。謝謝! – Iceman3000

+1

很高興我能幫忙! :) – Alex

+0

大聲笑我呢!我不認爲超時將需要,我的問題:http://stackoverflow.com/questions/32383804/why-is-my-eventlistener-getting-called-twice?noredirect=1#comment52639143_32383804 –