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.
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.
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.
Comments
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 theonScroll
event with a handler method calledcheckForEnd
.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."Uncaught TypeError: Cannot read property 'clientHeight' of null ".
This is what i implemented:
I'd suggest using CSS
visibility
rather thandisplay
(which is whatshowing
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.