How can I make wordpress infinite scrolling change the URL?

Question

I'm making a new blog for a startup who want a similar infinite scrolling effect to http://qz.com/

It also needs to include the URL changing as seen within the previously mentioned link.

For the life of me I can't figure out how it's done, I think it uses the HTML5 History API, but I also had it working in internet explorer so maybe it doesn't?

I would be incredibly grateful if someone could give me some pointers on how to make this work (using WordPress).

Answer 1

My friend asked me the same. So I made a plugin for it. I think this is what you want.

https://github.com/wataruoguchi/clever-infinite-scroll

This is the process of how to change the URL using infinite scrolling.

1. Watching scroll event. When scrolling hit the bottom of the page, Ajax calls next content. The link refers next content is removed. It's pretty basic of infinite scroll.
2. When next content loaded, it implements hidden span tags contain URL string and page title string of the content.
3. Watching scroll event. When the content is seen according to the scroll position, change the URL by history.pushState(). URL and title both strings are gotten from hidden span elements.
4. At the same timing, it changes the page title as well.

Answer 2

You can use infinite scroll to your WordPress theme by add some functions. And also you can activate this feature by using jetpack plugin. Basically it's using AJAX.

Answer 3

If anyone is looking to implement infinite scroll on WordPress, use Wataru's Infinite Scroll with URL cycling Script

Download the script, enqueue it in the footer or concatenate it with gulp or however you choose to use it.

How to implement infinite scroll in WordPress:

1) Organize your post content like so:

Single.php

<?php get_header(); ?>

   <main id="post-left-col" class="relative infinite-container" role="main">

      <?php if (have_posts()) : while (have_posts()) : the_post();

                    get_template_part( 'template-parts/post/content' );

                endwhile; endif;
                 ?>
                </main>
        </div>
<?php get_footer(); ?>

content.php

  <?php
    /**
     * Template part for displaying posts
    */
    ?>
    <article id="post-area" class="infinite-post">

<!-- Insert your post format here e.g. <h1><?php the_title; ?></h1> etc..

Make sure to include

    <div class="navigation"><?php next_post_link(); ?></div>

at the end of your content.php post template.

2) Set up your infinite scroll configuration. This, of course, can be included in your main javascript file. Any of the below selectors can have their name changed.

jQuery(document).ready(function($) {

    $('.infinite-content').cleverInfiniteScroll({
                contentsWrapperSelector: '.infinite-container',
                contentSelector: '.infinite-post',
                nextSelector: '.navigation a:first'
            });
});

Thanks to Paul Irish and Wataru for building upon the infinite scroll script.

Answer 4

The most straight forward way to do it would be to change the URL hash after each element is scrolled past. You could save this in a cookie and load it if the user returns to the page.

There seems to be a more advanced version of this using the History API as you mentioned, there is a good writeup here, this method does not support IE9 or earlier though.

Answer 5

You may like to try Project Sarus

https://github.com/srijanlabs/sarus

It implements same functionality and is highly customizable.

It is a frontend framework built in AngularJS so it can be used with wordpress in the backend. All you need to do is to expose the RSS or create an API. Else you may try to integrate it in wordpress html itself.