pklauzinski / jscroll

An infinite scrolling plugin for jQuery.
http://jscroll.com/
1.11k stars 563 forks source link

Doesn't Work Past Page 2 #141

Open ghost opened 7 years ago

ghost commented 7 years ago

Implementing on Wordpress. Works for page 1 and 2, but doesn't go farther. Scroll down to bottom, I should see a footer and pagination. I only see the footer. There are no plugins active on my site. Has anyone run into this?

// infinite scroll 
add_action( 'wp_enqueue_scripts', 'load_jscroll' );

function load_jscroll(){
    wp_enqueue_script('jscroll', get_stylesheet_directory_uri().'/js/jquery.jscroll.js', array( 'jquery')  );
}

function infinite_scroll() {
    global $avia_config;
        echo '<script type="text/javascript">
            jQuery( ".content" ).jscroll( {
            loadingHTML: "Loading...",
            padding: 20, 
            nextSelector: "span.current + a",
            contentSelector: ".post-entry",
            autoTrigger: true
        } )
        </script>';
}
add_action( 'wp_footer', 'infinite_scroll' );
alex-nick commented 6 years ago

My guess that maybe the trigger (nextSelector) is outside of the contentSelector.

The next link should be inside the posts container, like this:

<div class="posts-container">
    <div class="post">Post here...</div>
    <div class="post">Post here...</div>
    <div class="post">Post here...</div>
    <a href="/page2/">Next page</a>
</div>

The following code works for me:

$('.site-main').jscroll({
    contentSelector: '.post-listing',
    nextSelector: '.posts-navigation a:first'
});
<main id="main" class="site-main">

    <?php
    if ( have_posts() ) : ?>

    <div class="post-listing">

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

            <?php
            get_template_part( 'template-parts/post/content', 'entry' ); ?>

        <?php
        endwhile; ?>

        <nav class="posts-navigation" role="navigation">
           <?php next_posts_link('Next Entries','') ?>
        </nav>

    </div>

    <?php
    else :

        get_template_part( 'template-parts/content', 'none' );

    endif; ?>

</main>