6 jQuery Infinite Scrolling Demos

Infinite scrolling is now a common feature and there are several cases where it is really useful. For instance there are some websites where we simply can’t imagine a good pagination system, like Twitter or even Facebook. Another example of where infinite scrolling can be useful is for a search engine: you’ll want to continue viewing new links while you don’t find the one you want, and a pagination system can slow you down in your research. If you need to use infinite scrolling for your project, here are six demos that you can use as inspiration to implement it. Note that, except for the last one, all these demos are written with jQuery and some examples are using jQuery plugins. However, other examples can easily be adapted for vanilla JS without any problem.

Key Takeaways

• The article presents six demos on how to implement infinite scrolling, a feature that allows continuous scrolling through content without having to click on pagination links, improving user experience and engagement.
• The demos include infinite scrolling through grids, blog posts, images, numbers, spreadsheets, and a combination of infinite scrolling and pagination. Each demo is written in jQuery, though they can be adapted for vanilla JS, and some use jQuery plugins.
• The implementation of infinite scrolling can be customized according to the project’s needs, such as adjusting the loading message, handling errors, working with dynamic content, stopping when there’s no more content, and improving performance by optimizing content.

1. Infinite Scrolling and Grids

This demo uses the jQuery Masonry plugin together with the Infinite Scroll plugin. The Masonry plugin is good for obtaining fluid grid layouts. The Infinite Scroll plugin by Paul Irish is good at loading pages that already exist (so it is good for your SEO). You can use it to load static pages such as page2.html, page3.html, etc., but this plugin also handle generated pages, such as page.php?p=2, page.php?p=3. However, to use it you need to have a page number to increment in your URLs so, if you have pages such as page.php?data=xxx, then this plugin is not for you.

Usage – HTML

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

Usage – jQuery

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

2. Infinite Scrolling through Blog Posts

This demo doesn’t use any plugin or library to handle the infinite scrolling feature. Each time the end of the page is reached by the user, it loads a new post, generated by a PHP script that echoes the corresponding HTML code. The demo never reaches the end of content but you can achieve this by, for example, echoing an empty string when there is no more posts to show. We display a loading image at the end of the page, in the spirit of Twitter.

Note that, in the live demo below, the new posts are generated by a JavaScript function, as we can’t use a PHP script in CodePen.

See the Pen Infinite Scrolling through Blog Posts by SitePoint (@SitePoint) on CodePen.

Usage – HTML

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

Usage – jQuery

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

3. Infinite Scrolling through Images

This demo loads in images on infinite scroll and never reaches the end. It uses the jQuery Endless Scroll plugin which can be customized to trigger loading x number of pixels from the bottom of the screen. The demo clones the same images and inserts them at the end of the list and so on, but the script can be customized to load the images from different sources quite easily.

See the Pen Infinite Scrolling through Images by SitePoint (@SitePoint) on CodePen.

Usage – HTML

<span><span><span><ul</span> id<span>="posts"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><article</span>></span>content<span><span></article</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span>
</span>
<span><span><span><p</span> id<span>="loading"</span>></span>
</span>	<span><span><span><img</span> src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span>
</span><span><span><span></p</span>></span></span>

Usage – jQuery

<span>$(document).ready(function() {
</span>	<span>var win = $(window);
</span>
	<span>// Each time the user scrolls
</span>	win<span>.scroll(function() {
</span>		<span>// End of the document reached?
</span>		<span>if ($(document).height() - win.height() == win.scrollTop()) {
</span>			<span>$('#loading').show();
</span>
			$<span>.ajax({
</span>				<span>url: 'get-post.php',
</span>				<span>dataType: 'html',
</span>				<span>success: function(html) {
</span>					<span>$('#posts').append(html);
</span>					<span>$('#loading').hide();
</span>				<span>}
</span>			<span>});
</span>		<span>}
</span>	<span>});
</span><span>});</span>

4. Infinite List of Numbers

This demo uses the same plugin as the previous one but we have applied the infinite scroll to a list with its own vertical scrollbar. As you scroll down the numbers are simply appended as list items.

See the Pen An infinite list of numbers by SitePoint (@SitePoint) on CodePen.

Usage – HTML

<span><span><span><ul</span> id<span>="images"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><a</span> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></span>
</span>			<span><span><span><img</span> src<span>="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480"</span> alt<span>=""</span> /></span>
</span>		<span><span><span></a</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span></span>

Usage – jQuery

<span>$(document).ready(function() {
</span>	<span>$(window).endlessScroll({
</span>		<span>inflowPixels: 300,
</span>		<span>callback: function() {
</span>			<span>var $img = $('#images li:nth-last-child(5)').clone();
</span>			<span>$('#images').append($img);
</span>		<span>}
</span>	<span>});
</span><span>});</span>

5. Infinite Spreadsheets

This demo uses the same technique as demo 2 to detect when the user has reached the end of the document, not just vertically but also horizontally. Each time one end is reached we add a new row or a new column to the table. It is exactly the kind of script we could write if we want to create a spreadsheets application.

Note that all the cells are empty. The rows and columns indexes are generated with CSS counters so that we don’t need to calculate them by ourselves.

See the Pen Infinite Spreadsheets by SitePoint (@SitePoint) on CodePen.

Usage – HTML

<span><span><span><ul</span> id<span>="numbers"</span>></span>
</span>	<span><span><span><li</span>></span>1<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>2<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>3<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>4<span><span></li</span>></span>
</span>	<span><span><span><li</span>></span>5<span><span></li</span>></span>
</span>	…
<span><span><span></ul</span>></span></span>

Usage – jQuery

<span>$(document).ready(function() {
</span>	<span>var offset = $('#numbers li').length;
</span>
	<span>$('#numbers').endlessScroll({
</span>		<span>fireOnce: false,
</span>		<span>fireDelay: false,
</span>		<span>loader: '',
</span>		<span>insertAfter: '#numbers li:last',
</span>		<span>content: function(i) {
</span>			<span>return '<li>' + (i + offset) + '</li>';
</span>		<span>}
</span>	<span>});
</span><span>});</span>

6. Infinite Scrolling Pagination

There are cons against infinite scrolling: if it is not implemented well, the user experience can be broken. If you let the user load an infinite list, they can lose their place after a while. That’s a thing that never appends with a traditional pagination system. However, pagination requires actions from the user that aren’t necessary with infinite scrolling.

These two facts gave Tim Severien an idea: what if we combined infinite scrolling and pagination, to take the advantage of both methods? The result is this last demo.

An initial page is shown to the user. When the user scrolls down and reaches the bottom of the page, a new page is loaded automatically. Here we enjoy the simplicity from infinite scrolling. But the new things come from a list fixed at the bottom of the screen.

Initially hidden, this list is filled, each time a new page is loaded, with the number of this page. That way, if the user wants to retrieve the second page, they can without any effort by hitting the corresponding number.

See the Pen Infinite Scroll Pagination by SitePoint (@SitePoint) on CodePen.

Usage – HTML

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

Usage – JavaScript

Please note that this code uses ES6, but you can easily convert it to ES5.

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

Conclusion

We’ve looked at six different examples of implementing infinite scrolling. No matter what you’re trying to build, you should be able to use one of these techniques to achieve the result you want. As always, we’d love to hear your thoughts: have you built anything cool with one of these plugins or techniques? Do you have a favorite plugin that you think should have been mentioned? Let us know in the comments!

Frequently Asked Questions (FAQs) about jQuery Infinite Scrolling

How Can I Implement jQuery Infinite Scrolling on My Website?

Implementing jQuery infinite scrolling on your website involves a few steps. First, you need to include the jQuery library and the infinite scroll plugin in your HTML file. Then, you need to initialize the plugin and specify the content you want to load infinitely. You can do this by using the itemSelector option and pointing it to the class or ID of your content. Finally, you need to specify the path to the next set of content using the path option. This can be a URL or a function that returns a URL.

What Are the Benefits of Using jQuery Infinite Scrolling?

jQuery infinite scrolling offers several benefits. It improves user experience by allowing users to browse content without having to click on pagination links. It also reduces server load because content is only loaded when it’s needed. Additionally, it can increase engagement and time spent on your website, as users are more likely to keep scrolling and exploring your content.

Can I Customize the Loading Message in jQuery Infinite Scrolling?

Yes, you can customize the loading message in jQuery infinite scrolling. The plugin provides an option called loading, which allows you to specify the text and images to display while content is loading. You can also use CSS to style the loading message.

How Can I Handle Errors in jQuery Infinite Scrolling?

Handling errors in jQuery infinite scrolling can be done using the error callback. This function is called when the plugin fails to load content. You can use this callback to display an error message or take other actions.

Can I Use jQuery Infinite Scrolling with Dynamic Content?

Yes, jQuery infinite scrolling can be used with dynamic content. The plugin provides a method called infscr(‘bind’), which you can call to bind the infinite scroll functionality to newly loaded content.

How Can I Stop jQuery Infinite Scrolling When There’s No More Content?

You can stop jQuery infinite scrolling when there’s no more content by calling the infscr(‘destroy’) method. This will remove the infinite scroll functionality and prevent further content from being loaded.

Can I Use jQuery Infinite Scrolling with Other jQuery Plugins?

Yes, jQuery infinite scrolling can be used with other jQuery plugins. However, you need to ensure that the other plugins are compatible with infinite scrolling and won’t interfere with its functionality.

How Can I Test jQuery Infinite Scrolling?

You can test jQuery infinite scrolling by scrolling down your page and checking if new content is loaded. You can also use browser developer tools to monitor network requests and check if new content is being requested and loaded correctly.

Can I Use jQuery Infinite Scrolling on Mobile Devices?

Yes, jQuery infinite scrolling works on mobile devices. However, you need to ensure that your website is responsive and that the infinite scroll functionality works well on different screen sizes.

How Can I Improve the Performance of jQuery Infinite Scrolling?

You can improve the performance of jQuery infinite scrolling by optimizing your content. This includes reducing the size of your images, minifying your CSS and JavaScript files, and using server-side pagination to limit the amount of content loaded at once. You can also use lazy loading to only load images when they’re in the viewport.

The above is the detailed content of 6 jQuery Infinite Scrolling Demos. For more information, please follow other related articles on the PHP Chinese website!