Поэтому после долгого устранения неполадок я наконец выяснил, почему не работает бесконечная прокрутка (http://infiniteajaxscroll.com/examples/masonry.html).
Я использую дизайн материала Google для сайта (показано ниже).
Бесконечный свиток работает очень хорошо сам по себе. Однако, когда он находится внутри дизайна материала Google, он просто не работает.
Кто-нибудь, что я могу сделать по этому поводу?
<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( '« PREV', $loop->max_num_pages) ?></li>
<li class="rh_nav_next"><?php next_posts_link( 'NEXT »', $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>
Материал конструкции фиксирует основные обертки высотой до 100%;
.mdl-layout__container .mdl-js-layout
это позволяет избежать кладки, чтобы продолжать загружать больше элементов
так что в вашем собственном CSS добавить:
.mdl-layout__container, .mdl-js-layout{
height: auto;
}
Это решило проблему на моей стороне
Ты должен
ngx-infinite-scroll прослушивает события прокрутки из окна, а не элемент прокрутки. И в этом случае окно не генерирует никакого события прокрутки. Итак, мы хотим выделить из элемента прокрутки.
увидеть https://github.com/orizens/angular2-infinite-scroll для дополнительной информации