Event after scrolling

**RobG** · Jun 13 '07, 01:45 PM

Re: Event after scrolling

On Jun 13, 8:12 pm, Chamnap <chamnapchh...@ gmail.comwrote:

Hello everybody,
>
I have one problem. I want to do something after the user finished
scrolling.

How do you define "finished scrolling"? Is it a period of say 0.5
seconds of no scrolling after the last scroll event? How do you know
the user isn't about to start scrolling again?

--
Rob

**Elegie** · Jun 13 '07, 02:45 PM

Re: Event after scrolling

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>doAfterS croll Example</title>
<style type="text/css">body div {height:2000px; padding:100px}</style>


<script type="text/javascript">
var doAfterScroll = (function(){

// Configure
var SCROLL_DELAY = 1000 ;

// Do not edit the following
var
baseId = 0 ,
scrollId = 0 ,
currentlyScroll ing = false ,
funcs = [] ;

// --- Init ---
addEvent(
window,
"onscroll",
function(evt){
// update the scroll identifier
scrollId = new Date().getTime( );

if(!currentlySc rolling) { //Scroll has just started

// set the info
currentlyScroll ing=true;

// Launch the watch process
setTimeout(
function() {
if(scrollId==ba seId) { // Scrolling has stopped

// set the info
currentlyScroll ing = false;

// Execute the registered handlers
for(var ii=funcs.length ; ii--; ) funcs[ii]() ;

} else { // Still scrolling
// set a milestone
baseId=scrollId ;

// wait
setTimeout(
arguments.calle e,
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(hand ler){
return function(evt){
func.call(this, evt);
return handler.call(th is, evt);
}
})(obj[evt]);
} else {
obj[evt]=func;
}
}
})();
</script>


<script type="text/javascript">
window.onload = function(evt){
doAfterScroll(
function(){
document.body.f irstChild.inner HTML = "Scrolled at "+new Date() ;
}
);
}
</script>
</head>
<body><div>Hell o, World !</div></body>
---

HTH,
Elegie.

dd · Jun 14 '07, 07:35 AM

Re: Event after scrolling

On Jun 13, 12:12 pm, Chamnap <chamnapchh...@ gmail.comwrote:

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.....

Your scroll event handler should do a setTimeout call
to a final scroll handler. If you decide that the last
scroll timer should be half a second, then set the time
to 500 (ms). Each time your scroll event handler is
called, it clears the current timer and starts it new.
As long as you keep getting scroll events, you'll keep
stopping and restarting the timer. Only when they finally
leave it alone for 500ms will the setTimeout actually get
to call your real event handler.

If you want to stop the scrolling from happening then
you'll need to cancel the event from bubbling to it's
normal default handler. So your scroll event handler
would look something like this:

function ScrollEventHand ler(e){
clearTimeout(my ScrollTimer);
myScrollTimer=s etTimeout(Final ScrollEventHand ler,500);
//cancel the event if desired using
//something like this below
if(window.event ){
window.event.re turnValue=false ;
window.event.ca ncelBubble=true ;
}
else if(e&&e.prevent Default&&e.stop Propagation){
e.preventDefaul t();
e.stopPropagati on();
}
}

function FinalScrollEven tHandler(){
//OK they finally let go of the scrollbar
//let's do some stuff now
}

Of course Safari won't like this - it's too complicated
for it. Sure it'll run the code and appear to have worked
but it won't cancel the event.

I haven't tried using this method on scroll events,
so no guarantees here, but I have done it with link
clicked events (i.e. you clicked on a link). You can
use it to intercept any link on a page and warn users
that they're about to navigate to a link in another
domain for example.

Event after scrolling

Event after scrolling

Comment

Comment

Comment