無限スクロール
ウィンドウ自体のスクロールに連動するバージョンです。
CSS
<div id="scroll_area" class="uk-container uk-container-small uk-margin-top">
<div class="uk-grid-small" uk-grid>
<div id="loading" class="uk-width-1-1 uk-text-center uk-margin-top">
<span uk-spinner="ratio: 3"></span>
</div>
</div>
</div>
<script>
const el_item = '<div class="uk-width-1-3">' +
'<div class="uk-card uk-card-primary uk-card-body uk-margin-bottom">' +
'<h3 class="uk-card-title">Item{{count}}</h3>' +
'<p>Try scrolling down.</p>' +
'<p>下にスクロールしてみてください。</p>' +
'</div></div>';
document.addEventListener('DOMContentLoaded', () => {
let sc_count = 1;
let sc = new UkpInfiniteScroll(
null, 'loading',
(self, count) => {
console.log('loadItem', count);
// ここで通信などで表示アイテムを読み込む。
// setTimeout()の部分を通信などに置き換えてください。
setTimeout(() => {
for (i=0; i<9; i++) {
// 表示アイテムの追加
self.add(el_item.replace('{{count}}', sc_count++));
}
if (sc_count > 54) {
// スクロールによる読み込みを終了する場合
self.finish();
} else {
// スクロールによる読み込みを続行する場合
self.comp();
}
}, 1000)
});
});
</script>