Infinite Scroll in ExpressionEngine

Posted on in Tutorials, ExpressionEngine

An ExpressionEngine tutorial which allows you to use Infinite Scroll on your entries. This method does not use an embed so overhead is minimal.

Note this article was posted 11 years ago so techniques may not work anymore.

This method uses a forked version of infinite scroll which you can grab here. The forked version has an extractLink method which we can hook up with native ExpressionEngine pagination.

I'm using some standard ExpressionEngine Channel Entry tag markup with some pagination and my limit parameter set.

<div class="container">
	{exp:channel:entries channel="articles" dynamic="no" orderby="date" sort="asc" status="not closed" paginate="bottom" limit="12"}
		<div class="article">
		<h2>{entry_id} - {title} </h2>
		<p>{article_summary}</p>
		</div>	
		{paginate}
		<div class="pagination">
			{pagination_links}
				{previous_page}
					<a href="{pagination_url}" class="newer">Previous Page</a>
				{/previous_page}
				
				{next_page}
					<a href="{pagination_url}" class="older">Next Page</a>
					{/next_page}
			{/pagination_links}
		</div>
		{/paginate}
		
	{/exp:channel:entries}
</div>

Pagination is key here as that is what we are using to generate our extra content for our Infinite Scroll.

In the footer of your template link up jQuery and the forked version of jquery.infintescroll.js.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
<script src="/assets/js/jquery.infinitescroll.js" type="text/javascript"></script>
<!-- <script src="/assets/js/jquery.masonry.min.js" type="text/javascript"></script> -->

Now we add our Infinite Scroll settings below that. Add your own URL for the pathParse function. Be sure to keep the P at the end of the URL. My method below includes some commented out code to integrate Masonry.

<script>
	
	var $wall = $('.container');
	//Masonry - Uncomment for use
	/*
	$wall.masonry({
	columnWidth: 340,
	gutterWidth:0,
	isAnimated : true,
	resizeable: true,
	itemSelector : '.article'
	});
	*/
	
	//Infinite scroll
	$wall.infinitescroll({
	navSelector : 'div.pagination',
	nextSelector : 'div.pagination a.older',
	itemSelector : '.article',
	loading: {
	finishedMsg: "End of the line!",
	img: "/assets/img/ajax-loader.gif",
	msgText: "<em>Loading articles...</em>"
	},
	animate : true,
	extraScrollPx: 150,
	extractLink: true,
	
	    pathParse: function() {
	        return ['http://ws-expressionengine:8888/articles/P','']
	    },
	debug: true,
	errorCallback: function() {
	// fade out the error message after 2 seconds
	$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
	}
	},
	// Call Masonry as a callback - Uncomment for use
	/*
	function( newElements ) {
	var $newElems = $( newElements );
	$(this).masonry( 'appended', $newElems );
	}
	*/
	);
	
</script>

You can grab a more complete template example here.