-1

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.

drH
  • 1
  • 1
  • 3

1 Answers1

0

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.

vard
  • 4,057
  • 2
  • 26
  • 46
  • Thank you! I've found https://github.com/wataruoguchi/clever-infinite-scroll but it's not perfect. I will have to change the URL when scrolling up or down to previous or next post. – drH Sep 10 '15 at 12:26
  • Do you have some id that you can use to identify the "pages"? One solution could be to use [jQuery.isOnScreen](https://github.com/moagrius/isOnScreen) in order to identify which section is displayed. – vard Sep 10 '15 at 12:42
  • "Waypoints" is good. A DIV class identifies the URL `data-url=` then it can be changed with pushState. I will come back later with my findings. – drH Sep 15 '15 at 09:34