Load more when at reaching bottom of scroller

frankhdz

How can you detect when you are reaching the bottom of a scroller to trigger a load more function? Googled it but couldn't find any info. Thanks in advance.

joshtynjala

You can listen for ScrollEvent.SCROLL to know when the container scrolls. Compare the scrollY property to the maxScrollY property.

frankhdz

Thanks! I ended up figuring it out and made it work.

frankhdz

For anyone interested this is what I ended up with:

imageListContainer.addEventListener(ScrollEvent.SCROLL_COMPLETE, loadMore);

public static function loadMore(event:ScrollEvent):Void {
		//trace("scroll evt: "+event);


		var pct:Float =  (imageListContainer.scrollY/imageListContainer.maxScrollY)*100;
    		//if scroll thumb is past 80% load more images into the container from my model class
		if(pct>80){
			trace('Load More Movies');
			
			Images.imageList.getImages(Images.imagesListPage);

		}
	}

joshtynjala

I would probably check for a specific number of pixels. If you load more images multiple times, that last 20% will keep getting bigger and bigger. A specific number of pixels will be more consistent.

var difference = imageListContainer.maxScrollY - imageListContainer.scrollY;
if (difference < 100.0) {

Additionally, you might want to add a check to see if you are already loading more images. Once you pass the threshold, any additional scrolling will still be past the threshold, so you may actually end up making multiple requests, if you aren't careful.