By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,537 Members | 1,750 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,537 IT Pros & Developers. It's quick & easy.

Event after scrolling

P: n/a
Hello everybody,

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

Thanks
Chamnap

Jun 13 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
Jun 13 '07 #2

P: n/a
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.
Jun 13 '07 #3

P: n/a
dd
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 ScrollEventHandler(e){
clearTimeout(myScrollTimer);
myScrollTimer=setTimeout(FinalScrollEventHandler,5 00);
//cancel the event if desired using
//something like this below
if(window.event){
window.event.returnValue=false;
window.event.cancelBubble=true;
}
else if(e&&e.preventDefault&&e.stopPropagation){
e.preventDefault();
e.stopPropagation();
}
}

function FinalScrollEventHandler(){
//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.

Jun 14 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.