Scroller Event once reached bottom

krakesh_cse

I am aware of "OnScrollStop" event fired once a scroller stops. But i am facing problem on how to get a event for scroller reaching at bottom. I have a need to fetch more data once scroller reaches at bottom.

arthur

I would recommend using the onScroll handler to listen for a scroll event so you can fetch the data a little bit before the user reaches the end; this way, the user does not necessarily need to reach the end of scroller before the next chunk of data is pulled in. For this, you can check out a fiddle I created at http://jsfiddle.net/arthurthornton/xvq3X/, which uses the onScroll event with a handler method called checkForEnd.

You could even use this to check if inEvent.scrollBounds.top === inEvent.scrollBounds.maxTop and know that the user is then at the absolute bottom of the scroller.

krakesh_cse

I tried what you have suggested, but while using i am getting this error once scroller reaches at the bottom. Also there is some lag happening.

"Uncaught TypeError: Cannot read property 'clientHeight' of null ".

This is what i implemented:

var maxTopVal = inEvent.scrollBounds.maxTop,
actualTop = inEvent.scrollBounds.top;
if(maxTopVal===0)
return;
if((maxTopVal*0.95)-actualTop <50.0 && this.i!=1) {
this.$.more.setShowing(true);
this.resized();
}else
this.$.more.setShowing(false);</blockquote>

this.resized() is done to show "more" button.As i was facing problem, even setShowing(true) wasn't rendering more, so i used resized().

theryanjduffy

You will likely see lag if you call resized() during the scroll handler. resized forces size recalculations and layout reflows all the way down the control hierarchy which is pretty expensive (and synchronous).

I'd suggest using CSS visibility rather than display (which is what showing affects) in this case. display: none doesn't reserve its visible space on the page. As a result, changing display to block changes the scrollBounds of the scroller because the height of the content change. Visibility, on the other hand, just hides the control but leaves the space empty. That can be a bit odd in some cases but shouldn't be a problem in this use case. It should preclude the need for resized() as well as the dimensions of the controls aren't changing.

I'd add that you might choose to do both: toggle visibility during scrolling to show the button but hide is altogether using display when there are no more records to be returned.

krakesh_cse

Thanks!...It really helped.