[Scripts] Infinite Scroll with Scroll mode in Oxygen

This tutorial provides the steps to set up infinite scroll for the posts on Posts page (Blog) or archive pages in Oxygen using the Scripts module of Oxy Toolbox so that the next set of posts automatically load when the user scrolls to the bottom.

For “Click to load more” mode, follow this instead.

Step 1

Go to Oxygen > Oxy Toolbox. Check Scripts.

Step 2

Edit the Template that applies to your Posts page or an archive.

Step 3

Add a Section and inside that, an Easy Posts component. Leave the query as default.

Add a Code Block below the Easy Posts component.

PHP & HTML:

<div class="page-load-status">
  <div class="loader-ellips infinite-scroll-request">
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
    <span class="loader-ellips__dot"></span>
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

<?php
	wp_enqueue_script( 'oxy_toolbox_scripts_infinite-scroll' );
?>

CSS:

.page-load-status {
	display: none; /* hidden by default */
	/* padding-top: 20px;
	border-top: 1px solid #DDD; */
	text-align: center;
	color: #777;
}

.loader-ellips {
	font-size: 20px; /* change size here */
	position: relative;
	width: 4em;
	height: 1em;
	margin: 10px auto;
}

.loader-ellips__dot {
	display: block;
	width: 1em;
	height: 1em;
	border-radius: 0.5em;
	background: #555; /* change color here */
	position: absolute;
	animation-duration: 0.5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
	left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
	from { transform: scale(0.001); }
	to { transform: scale(1); }
}

@keyframes slide {
	to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
	animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
	animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
	animation-name: reveal;
	animation-direction: reverse;
}

JavaScript:

document.addEventListener("DOMContentLoaded", function() {
	if(window.angular) return;

	var infScroll = new InfiniteScroll( '.oxy-posts', {
		path: '.next.page-numbers',
		append: '.oxy-post',
		hideNav: '.oxy-easy-posts-pages',
		status: '.page-load-status',
		scrollThreshold: 100
	});
});

That’s it.

Infinite scroll should now be working on the front end.