Change URL (with pushState) using Infinite Scroll in WordPress

Question

I've set up the infinite scroll from here and it works: https://github.com/pklauzinski/jscroll . Additionally I would like to change the URL in the browser address bar but I can't get it working. There is a similar solution on https://github.com/wataruoguchi/clever-infinite-scroll but I would like to load only the next post always and not all the posts called by the selector.

How could I use pushState with jScroll? The goal is to use jScroll and the URL needs to be changed when scrolling to previous or next posts.

Answer 1

You can use the callback parameter of jscroll in order to fire a function after it finished to load the content.

var currentPage = 1;
$('.jscroll').jscroll({
    // your current jsscroll options
    callback: function() {
        currentPage++;
        History.pushState(null, $('head > title').html(), 'http://yourpageurl.com/page/' + currentPage);
    }
});

In that callback you can use pushState to manipulate the browser history. Replace the url with the correct one, and update currentPage if your infinitescroll is supposed to be going backward too.

You'll need to scroll to the specific position on load too, from the page parameter.