Javascript：在用戶完成滾動後執行一個動作

我在想辦法做到這一點。我有一個箱子列表，每個箱子高約爲150px。我正在使用javascript（和jquery），並希望在用戶向下滾動頁面後，頁面將自動滾動，以便框與頁面的其餘部分對齊（也就是說，如果用戶滾動並且y頁面的位置不能被150整除，它會滾動到最近的點）。Javascript：在用戶完成滾動後執行一個動作

現在，我在此刻，我知道我可以使用.scroll() jquery事件來激活事件，並且我可以使用.scrollTop()將它移動到某個點。但是用戶移動滾動條的每個像素都會激活整個功能。那麼是否有一種方法可以延遲直到用戶沒有滾動的功能，並且如果他們應該再次開始滾動，該功能會停止？

來源

2010-11-27 DavidR

因爲你已經使用jQuery，看看Ben Alman's doTimeout plugin其中已經處理的方法debouncing（這是你所追求的）。

例從他的網站無恥被盜：

$(window).scroll(function(){ 
    $.doTimeout('scroll', 250, function(){ 
     // do something computationally expensive 
    }); 
});

來源

2010-11-27 01:17:46

+1 Nice插件，只有1k。 debouncing應該包含在jQuery 1.5中:) – 2010-11-27 01:27:02

Dude。美麗而輝煌。我不認爲我會喜歡這樣的插件。 – DavidR 2010-11-27 02:19:26

當然，在滾動事件的事件處理程序中，在setTimeout後面觸發100或200毫秒。您在滾動事件處理程序中設置的setTimeout函數執行上面提到的定位邏輯。還有滾動事件處理程序清除由自己設置的任何超時。這樣，上次滾動事件觸發時，setTimeout函數將完成，因爲滾動事件尚未清除它。

來源

2010-11-27 00:51:03

代碼：

var scrollTimeout = null; 
var scrollendDelay = 500; // ms 

$(window).scroll(function() { 
    if (scrollTimeout === null) { 
     scrollbeginHandler(); 
    } else { 
     clearTimeout(scrollTimeout); 
    } 
    scrollTimeout = setTimeout(scrollendHandler, scrollendDelay); 
}); 

function scrollbeginHandler() { 
    // this code executes on "scrollbegin" 
    document.body.style.backgroundColor = "yellow"; 
} 

function scrollendHandler() { 
    // this code executes on "scrollend" 
    document.body.style.backgroundColor = "gray"; 
    scrollTimeout = null; 
}

來源

2010-11-27 01:13:28

-1

這將是一個場景，其中香草的JavaScript將是有益的。

var yourFunction = function(){ 
    // do something computationally expensive 
} 

$(window).scroll(function(){ 
    yfTime=setTimeout("yourFunction()",250); 
});

來源

2012-04-23 22:38:56

這是基本相同SIME維達斯的回答，但不COMLEX：

var scrollTimeout = null; 
$(window).scroll(function(){ 
    if (scrollTimeout) clearTimeout(scrollTimeout); 
    scrollTimeout = setTimeout(function(){yourFunctionGoesHere()},500); 
});

500的延遲。鼠標滾動應該可以。

來源

2014-02-06 19:17:57 lenooh

Javascript：在用戶完成滾動後執行一個動作

回答

相關問題