Google Material Design и бесконечная прокрутка

Поэтому после долгого устранения неполадок я наконец выяснил, почему не работает бесконечная прокрутка (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( '&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>

1

Решение

Материал конструкции фиксирует основные обертки высотой до 100%;

.mdl-layout__container .mdl-js-layout

это позволяет избежать кладки, чтобы продолжать загружать больше элементов

так что в вашем собственном CSS добавить:

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

Это решило проблему на моей стороне

2

Другие решения

Ты должен

  1. set [scrollWindow] = «false»
  2. установить значение explict css «height» для элемента

ngx-infinite-scroll прослушивает события прокрутки из окна, а не элемент прокрутки. И в этом случае окно не генерирует никакого события прокрутки. Итак, мы хотим выделить из элемента прокрутки.

увидеть https://github.com/orizens/angular2-infinite-scroll для дополнительной информации

0

По вопросам рекламы [email protected]