---
title: Infinite Scroll in ExpressionEngine
date: 2012-07-27T01:00:00+01:00
author: John Henry Donovan
canonical_url: "https://johnhenry.ie/blog/2012/07/infinite-scroll-in-expressionengine"
section: Blog
---
Browse by categoryAll PostsWeb DevelopmentDesignLifestyleMusic & FilmTutorialsSpottedSpeakingReviewsFound FoodRecipesIreland

[](/blog)

# Infinite Scroll In ExpressionEngine

Posted on 27th July, 2012

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 13 years ago so techniques may not work anymore.

This method uses a forked version of infinite scroll which you can grab [here](https://github.com/DeadCat/infinite-scroll/blob/master/jquery.infinitescroll.js). 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.

```twig
<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.

```twig
<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.

```twig
<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](https://gist.github.com/john-henry/3179683).

### Share this link via

###### Or copy link

Copy

[ Previous Blog Post

Simple Tag Cloud In Statamic](https://johnhenry.ie/blog/2012/08/simple-tag-cloud-in-statamic-1 "Previous Blog Post")

[Next Blog Post

Chained Selects For ExpressionEng…](https://johnhenry.ie/blog/2012/07/chained-selects-for-expressionengine "Next Blog Post")