Infinite scroll on multiple tabs of same page

Yup, same problem here. I have multiple tabs with infinite scroll “walls” inside of each tab. I am using the “active” attribute for each tab to call the infinite scroll on it so it only scrolls inside the active tab, but once I reach the bottom of one tab, the other tabs aren’t scrolling anymore.

Did you figure this out by any chance?

Sup. I managed to find a workaround.

What I did first is create different loops with different paginations, so they all load different content when you scroll down. First, I got these $paged vars at the top of my code somewhere:

$paged1 = isset( $_GET['paged1'] ) ? (int) $_GET['paged1'] : 1;
        $paged2 = isset( $_GET['paged2'] ) ? (int) $_GET['paged2'] : 1;
        $paged3 = isset( $_GET['paged3'] ) ? (int) $_GET['paged3'] : 1;

Then, you create different WP_Queries for every loop, so tab 1, for example, would be something like this:

$args1 = array(
            'paged'          => $paged1
            //some other arguments
        );
        $query1 = new WP_Query($args1);
        if ($query1->have_posts()) : while ($query1->have_posts()) : $query1->the_post();
                    //do stuff for each post
        endwhile; endif;

Then, add a different pagination for each loop, like so:

$pag_args1 = array(
            'format'  => '?paged1=%#%',
            'current' => $paged1,
            'total'   => $query1->max_num_pages,
            'add_args' => array('paged2' => $paged2, 'paged3' => $paged3)//add the other $paged vars in this array, so they can be passed on in the URL and the current page of the other loops won't change when you scroll/click
        );
        echo paginate_links($pag_args1);

So, you do that for each tab, and you now have 3 tabs with 3 different loops and separate paginations ready to go. Now, you can call the infinite scroll on them. I did this manually (for now), by adding the basic infinite scroll line to the footer.php that’s in the /templates folder, something like this:

var tab_one_scroll = "{navSelector  : '#tab-one .pagination', nextSelector : '#tab-one .pagination .next_page a', itemSelector : '#tab-one .photos .photo', callback : '' }";

jQuery( tab_one_scroll.contentSelector ).infinitescroll( tab_one_scroll, function(newElements, data, url) { eval(tab_one_scroll.callback); });

So the infinite scroll is automatically called on the first tab when the page loads. If you don’t specify the specific tab (and, therefore, loop), you’re gonna accidentally load multiple tabs when you scroll down, so that’s why I only called it on the first one. For each additional tab, I do the same, but I wrap it in a click event, so the infinite scroll only gets triggered when the tab navigation is clicked. Like so:

jQuery(document).on('click', '#tab-two-navigation-link', function(e){
//repeat tab 1 code for tab 2
});

So now you have different content loading for each tab, and a new instance of infinite scroll is triggered each time someone clicks the tab navigation, so when you reach the bottom of one tab, you can still scroll the others. Probably could be cleaner, but this did the job for me. Hope it helps!