CODEWITHSUNDEEP
phpinfinite-scroll
Steve Kim
Steve Kim

Reputation: 5601

Google Material Design and Infinite Scroll

So after a long troubleshooting, I finally found out why the infinite scroll did not work (http://infiniteajaxscroll.com/examples/masonry.html).

I am using a google material design for the site (shown below).

The infinite scroll works just fine by itself. However when it is inside of google material design, it simply does not work.

Does anyone what I can do about this?

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer">
<header class="mdl-layout__header">
    Head
</head>
<main class="mdl-layout__content">
    <div class="rfp_hide" id="rhm_post_show">
        <?php
        if ( get_query_var('paged') ) {
            $paged = get_query_var('paged');
        } elseif ( get_query_var('page') ) {
            $paged = get_query_var('page');
        } else {
            $paged = 1;
        }
        $args = array(              
            'paged'=>$paged,
            'posts_per_page' => 5,              
            'orderby' => 'date',            
            'order' => 'DESC'
            );
        $loop = new WP_Query( $args );
        global $post, $paged; 
        while ( $loop->have_posts() ) : $loop->the_post(); 
        ?>
        <div class="rhm_post_container">
            Post
        </div>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>       
    </div>
    <nav id="rh_nav_below">
        <ul>
            <li class="rh_nav_previous"><?php previous_posts_link( '&laquo; PREV', $loop->max_num_pages) ?></li> 
            <li class="rh_nav_next"><?php next_posts_link( 'NEXT &raquo;', $loop->max_num_pages) ?></li>
        </ul>
    </nav>
</main>
</div>


<script>
var container = document.querySelector('#rhm_post_show');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.rhm_post_container',
  gutter: 10
});

var ias = $.ias({
  container:  '#rhm_post_show',
  item:       '.rhm_post_container',
  pagination: '#rh_nav_below',
  next:       '.rh_nav_next a',
  delay: 100
});

ias.on('render', function(items) {
  $(items).css({ opacity: 0 });
});

ias.on('rendered', function(items) {
  msnry.appended(items);
});

 ias.extension(new IASSpinnerExtension());
 ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'}));
 </script>

Upvotes: 1

Views: 796

Answers (2)

Diyen Momjang
Diyen Momjang

Reputation: 1851

You have to

  1. set [scrollWindow]="false"
  2. set an explict css "height" value to the element

ngx-infinite-scroll listens to scroll events from the window and not the scroll element. And in this case the window does not throw any scroll event. So we want to listle from the scroll element.

see https://github.com/orizens/angular2-infinite-scroll for more information

Upvotes: 0

iitob
iitob

Reputation: 21

Material design locks the main wrappers height to 100%;

.mdl-layout__container .mdl-js-layout

this avoid masonry to keep loading more elements

so in your custom CSS add:

.mdl-layout__container, .mdl-js-layout{
  height: auto;
}

This solved the issue on my side

Upvotes: 2

Related Questions