2

そのため、無限スクロール ( http://infiniteajaxscroll.com/docs/getting-started.html ) を使用しています。

ただし、メインコンテンツが「mdl-js-layout」内にある場合、無限スクロール機能は動作しません (以下を参照)。

そのため、最も外側の divを削除するmdl-js-layoutと、無限スクロールが機能し、それ以外の場合は機能しません。

<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>

開発者に問い合わせたところ、次のような回答を得ました:( https://github.com/google/material-design-lite/issues/1584#issuecomment-139060676 )

現在、MDL は静的コンテンツを対象としているため、無限スクロールを伴うユースケースは現在サポートされていません。ただし、MDL を動的サイトで動作させる人がいます。StackOverflow に移動して material-design-lite タグを使用することで、おそらく貴重な助けを得ることができます。

誰か私が試すべきことはありますか？

ありがとう！

4

2 に答える 2