Javascript 我怎么知道我什么时候停止滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4620906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I know when I've stopped scrolling?
提问by krishna
How do I know when I've stopped scrolling using Javascript?
我怎么知道我何时停止使用 Javascript 滚动？
回答by Felix Kling
You can add an event handler for the scrollevent and start a timeout. Something like:
您可以为事件添加事件处理程序scroll并启动超时。就像是：
var timer = null;
window.addEventListener('scroll', function() {
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// do something
}, 150);
}, false);
This will start a timeout and wait 150ms. If a new scrollevent occurred in the meantime, the timer is aborted and a new one is created. If not, the function will be executed. You probably have to adjust the timing.
这将启动超时并等待 150 毫秒。如果scroll在此期间发生了新事件，则中止计时器并创建一个新事件。如果没有，该函数将被执行。您可能需要调整时间。
Also note that IE uses a different way to attach event listeners, this should give a good introduction: quirksmode - Advanced event registration models
还要注意 IE 使用不同的方式来附加事件侦听器，这应该给一个很好的介绍：quirksmode - Advanced event Registration models
回答by David
There isn't a "Stopped Scrolling" event. If you want to do something after the user has finished scrolling, you can set a timer in the "OnScroll" event. If you get another "OnScroll" event fired then reset the timer. When the timer finally does fire, then you can assume the scrolling has stopped. I would think 500 milliseconds would be a good duration to start with.
没有“停止滚动”事件。如果你想在用户完成滚动后做一些事情，你可以在“OnScroll”事件中设置一个计时器。如果您触发另一个“OnScroll”事件，则重置计时器。当计时器最终触发时，您可以假设滚动已停止。我认为 500 毫秒是一个很好的开始时间。
Here's some sample code that works in IE and Chrome:
下面是一些适用于 IE 和 Chrome 的示例代码：
<html>
<body onscroll="bodyScroll();">
<script language="javascript">
var scrollTimer = -1;
function bodyScroll() {
document.body.style.backgroundColor = "white";
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout("scrollFinished()", 500);
}
function scrollFinished() {
document.body.style.backgroundColor = "red";
}
</script>
<div style="height:2000px;">
Scroll the page down. The page will turn red when the scrolling has finished.
</div>
</body>
</html>
回答by Muhammad Tahir
(function( $ ) {
$(function() {
var $output = $( "#output" ),
scrolling = "<span id='scrolling'>Scrolling</span>",
stopped = "<span id='stopped'>Stopped</span>";
$( window ).scroll(function() {
$output.html( scrolling );
clearTimeout( $.data( this, "scrollCheck" ) );
$.data( this, "scrollCheck", setTimeout(function() {
$output.html( stopped );
}, 250) );
});
});
})( jQuery );
=======>>>> Working Example here
========>>>> 这里的工作示例
回答by sri_wb
I did something like this:
我做了这样的事情：
var scrollEvents = (function(document, $){
var d = {
scrolling: false,
scrollDirection : 'none',
scrollTop: 0,
eventRegister: {
scroll: [],
scrollToTop: [],
scrollToBottom: [],
scrollStarted: [],
scrollStopped: [],
scrollToTopStarted: [],
scrollToBottomStarted: []
},
getScrollTop: function(){
return d.scrollTop;
},
setScrollTop: function(y){
d.scrollTop = y;
},
isScrolling: function(){
return d.scrolling;
},
setScrolling: function(bool){
var oldVal = d.isScrolling();
d.scrolling = bool;
if(bool){
d.executeCallbacks('scroll');
if(oldVal !== bool){
d.executeCallbacks('scrollStarted');
}
}else{
d.executeCallbacks('scrollStopped');
}
},
getScrollDirection : function(){
return d.scrollDirection;
},
setScrollDirection : function(direction){
var oldDirection = d.getScrollDirection();
d.scrollDirection = direction;
if(direction === 'UP'){
d.executeCallbacks('scrollToTop');
if(direction !== oldDirection){
d.executeCallbacks('scrollToTopStarted');
}
}else if(direction === 'DOWN'){
d.executeCallbacks('scrollToBottom');
if(direction !== oldDirection){
d.executeCallbacks('scrollToBottomStarted');
}
}
},
init : function(){
d.setScrollTop($(document).scrollTop());
var timer = null;
$(window).scroll(function(){
d.setScrolling(true);
var x = d.getScrollTop();
setTimeout(function(){
var y = $(document).scrollTop();
d.setScrollTop(y);
if(x > y){
d.setScrollDirection('UP');
}else{
d.setScrollDirection('DOWN');
}
}, 100);
if(timer !== 'undefined' && timer !== null){
clearTimeout(timer);
}
timer = setTimeout(function(){
d.setScrolling(false);
d.setScrollDirection('NONE');
}, 200);
});
},
registerEvents : function(eventName, callback){
if(typeof eventName !== 'undefined' && typeof callback === 'function' && typeof d.eventRegister[eventName] !== 'undefined'){
d.eventRegister[eventName].push(callback);
}
},
executeCallbacks: function(eventName){
var callabacks = d.eventRegister[eventName];
for(var k in callabacks){
if(callabacks.hasOwnProperty(k)){
callabacks[k](d.getScrollTop());
}
}
}
};
return d;
})(document, $);
the code is available here: documentScrollEvents
代码在此处可用：documentScrollEvents
回答by Ivin Raj
Minor update in your answer. Use mouseover and out function.
您的答案中的小更新。使用鼠标悬停和移出功能。
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
var ticke= setInterval(function(){
ticker();
}, 3000);
$('#ticker li').mouseover(function() {
clearInterval(ticke);
}).mouseout(function() {
ticke= setInterval(function(){ ticker(); }, 3000);
});
});
回答by Ahsit Tamang
I was trying too add a display:block property for social icons that was previously hidden on scroll event and then again hide after 2seconds. But
我也尝试为以前在滚动事件中隐藏的社交图标添加 display:block 属性，然后在 2 秒后再次隐藏。但
I too had a same problem as my code for timeout after first scroll would start automatically and did not had reset timeout idea. As it didn't had proper reset function.But after I saw David's idea on this question I was able to reset timeout even if someone again scrolled before actually completing previous timeout.
我也有同样的问题，因为我的第一次滚动后超时代码会自动启动并且没有重置超时想法。因为它没有适当的重置功能。但是在我看到大卫在这个问题上的想法后，即使有人在实际完成之前的超时之前再次滚动，我也能够重置超时。
problem code shown below before solving
$(window).scroll(function(){ setTimeout(function(){ $('.fixed-class').slideUp('slow'); },2000); });
解决前问题代码如下图
$(window).scroll(function(){ setTimeout(function(){ $('.fixed-class').slideUp('slow'); },2000); });
edited and working code with reset timer if next scroll occurs before 2s
var timer=null; $(window).scroll(function(){ $('.fixed-class').css("display", "block"); if(timer !== null) { clearTimeout(timer);
} timer=setTimeout(function(){ $('.fixed-class').slideUp('slow'); },2000);});
如果下一次滚动发生在 2 秒之前，则编辑和工作代码与重置计时器
var timer=null; $(window).scroll(function(){ $('.fixed-class').css("display", "block"); if(timer !== null) { clearTimeout(timer);
} timer=setTimeout(function(){ $('.fixed-class').slideUp('slow'); },2000);});
My working code will trigger a hidden division of class named 'fixed-class' to show in block on every scroll. From start of latest scroll the timer will count 2 sec and then again change the display from block to hidden.
我的工作代码将触发一个名为“fixed-class”的隐藏类，在每个滚动块上显示。从最近滚动开始，计时器将计数 2 秒，然后再次将显示从块更改为隐藏。
