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：在用户完成滚动后执行一个动作

回答

相关问题