谷歌材料设计和无限滚动答案

【问题标题】：Google Material Design and Infinite Scroll谷歌材料设计和无限滚动
【发布时间】：2015-09-08 08:04:15
【问题描述】：

所以经过长时间的排查，我终于找到了无限滚动不起作用的原因（http://infiniteajaxscroll.com/examples/masonry.html）。

我正在为网站使用谷歌材料设计（如下所示）。

无限滚动本身就可以正常工作。但是，当它在 google material design 中时，它根本不起作用。

有没有人对此我能做些什么？

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

【问题讨论】：

有什么建议吗？大声笑

标签： php infinite-scroll

【解决方案1】：

材质设计将主包装高度锁定为 100%；

.mdl-layout__container .mdl-js-layout

这避免了砌体以继续加载更多元素

所以在您的自定义 CSS 中添加：

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

这解决了我这边的问题

【讨论】：

【解决方案2】：

你必须

设置 [scrollWindow]="false"
为元素设置显式 CSS“高度”值

ngx-infinite-scroll 从窗口而不是滚动元素监听滚动事件。在这种情况下，窗口不会引发任何滚动事件。所以我们想从滚动元素中列出来。

【讨论】：