Infinite scroll on single.php with URL change

Question

I'm developing a theme that needs this functionality, exactly like The Daily Beast and Bloomberg does.

If you scroll the page until the end of the blogpost, the next one will be loaded and the URL will change to match the current post.

Does anyone knows a plugin or at least any ideas on how can I do this?

Answer 1

You will need to listen to an event which is fired when a visitor browses to the end of the page. This could be a scroll listener that fires when a certain element pops into view (multiple ways to do this).

When the event is fired, you'll need to fetch the new post with AJAX (see WP documentation on plugin/theme AJAX, e.g. how to use admin-ajax.php in WordPress). After the AJAX response is loaded and successfully inserted to the template you'll need to use the browser History API or similar to push a new URL for the page.

Maybe you could split this question into several smaller ones and get more descriptive answers on each. I see the following which you need to solve (and which aren't 1-to-1 related):

1. Trigger a JS event when user scrolls to a certain place on the page.
2. Load and insert a WordPress post to a template using AJAX.
3. Alter the browsers current URL address after something is done on the page.