Infinite Scroll

無限スクロール

ウィンドウ自体のスクロールに連動するバージョンです。

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>