Chamnap wrote:
Hi,
I have one problem. I want to do something after the user finished
scrolling. The scroll event fires whenever the user is scrolling. I
don't want this actually. Does anyone has any idea or trick of how to
achieve this? Appreciate your ideas.....
As Rob has pointed out, defining a scroll-stop event is not that an
obvious task, especially in regards of user's scrolling behaviors: there
is a risk that your users would end up being confused, especially if
they're used to scrolling in a slow fashion.
However, if you can define some acceptable delay, after which, no scroll
having occurred, you may consider the user has stopped scrolling, then
you can perform the task.
There are two main approaches. The first one consists in setting up a
timer, using the setInterval host method, and watch regularly scroll
offsets (scrollTop, scrollLeft). The second one consists in launching
and stopping the process directly after the study of the scroll event -
see below (tested IE7, FF2 on Windows).
---
<head>
<title>doAfterScroll Example</title>
<style type="text/css">body div {height:2000px;padding:100px}</style>
<!-- the following script part
can be externalized in some javascript file -->
<script type="text/javascript">
var doAfterScroll = (function(){
// Configure
var SCROLL_DELAY = 1000 ;
// Do not edit the following
var
baseId = 0 ,
scrollId = 0 ,
currentlyScrolling = false ,
funcs = [] ;
// --- Init ---
addEvent(
window,
"onscroll",
function(evt){
// update the scroll identifier
scrollId = new Date().getTime();
if(!currentlyScrolling) { //Scroll has just started
// set the info
currentlyScrolling=true;
// Launch the watch process
setTimeout(
function() {
if(scrollId==baseId) { // Scrolling has stopped
// set the info
currentlyScrolling = false;
// Execute the registered handlers
for(var ii=funcs.length; ii--; ) funcs[ii]() ;
} else { // Still scrolling
// set a milestone
baseId=scrollId ;
// wait
setTimeout(
arguments.callee,
SCROLL_DELAY
);
}
},
SCROLL_DELAY
);
} else {
// a process has already been launched
// and is waiting to be completed
// - Do nothing
}
}
);
// --- return the registering function ---
return function (func) { funcs.push(func); }
// --- Helpers ---
function addEvent(obj, evt, func){
if(obj[evt]) {
obj[evt]=(function(handler){
return function(evt){
func.call(this, evt);
return handler.call(this, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}
})();
</script>
<!-- Test -->
<script type="text/javascript">
window.onload = function(evt){
doAfterScroll(
function(){
document.body.firstChild.innerHTML = "Scrolled at "+new Date() ;
}
);
}
</script>
</head>
<body><div>Hello, World !</div></body>
---
HTH,
Elegie.
