PDA

View Full Version : Detecting end of scroll event



teddyjas
9 Sep 2009, 12:40 AM
Hi,

I got a div with overflow content and allow the user to scroll the content.
While scrolling, there's code to be executed and I also need to execute another function when the user stop scrolling.

The following is the code I used by attaching a function to the div's scroll event


Ext.get('container').on('scroll',this.navigate,this);


this.navigate refers to a function, which always executed when user scrolls.
I have a function stopScroll() which need to be executed after the user stops scrolling.

I can't put this stopScroll() function in the navigate() function as it will always execute when user scrolls...

so how would be the best way to call this stopScroll() function when the user finish scrolling?

If I attach 'mouseup' event to the div to execute the stopScroll() it will executed when the user finish scrolling - but this method only works if user is using mouse button, if the user use the mouse wheel then it won't basically calls the mouseup...

My thinking is I will need to attach a timer after the last scroll event to call the stopScroll, but how to do that??

Animal
9 Sep 2009, 1:04 AM
Could try the buffer config on the scroll listener creation. Buffer it to fire 100ms after the event finishes. So if they are holding the mouse button down, and scroll events are constantly firing, the event doesn't get fired until 100ms after they mouseup.

teddyjas
9 Sep 2009, 1:55 AM
Could try the buffer config on the scroll listener creation. Buffer it to fire 100ms after the event finishes. So if they are holding the mouse button down, and scroll events are constantly firing, the event doesn't get fired until 100ms after they mouseup.

I managed to settle this by adding few lines of codes inside the navigate() function:


if (this.timeoutid){
clearTimeout ( this.timeoutid );
}
this.timeoutid = this.stopScroll.defer(1500, this);

this way stopscroll will be called when user ends the scrolling...


Animal, I'd like to try your method as you mentioned, how & where do I put the buffer config?

thanks

Animal
9 Sep 2009, 2:25 AM
http://www.extjs.com/deploy/ext-3.0-rc3/docs/?class=Ext.util.Observable&member=addListener