SvelteとTailwindを使用してInfinite Scrollできる方法

出版日: 2024年4月30日

このブログ投稿では、SvelteとTailwindを使用して無限にスクロール可能なHTML要素を構築する方法を探ってみましょう。

まず、高さと幅が固定されたdiv要素を作成し、下にオーバーフローするコンテンツを作成しましょう。

以下のコードを使用して、ユーザーがコンテナ内でさらにどれだけスクロールできるかを確認できます。上記のように、それをコンテナの右上隅に配置します。

<script>
let container;
function getScroll() {
	scrollableHeight = container.scrollHeight - (container.scrollTop + container.clientHeight);
}
</script>

<div class="relative">
	<p class="absolute">{scrollableHeight}</p>
	<div bind:this={container} on:scroll={getScroll}>
		<img src="Doggie1.jpg"/>
		<img src="Doggie2.jpg"/>
		<img src="Doggie3.jpg"/>
	</div>
</div>

興味深いことにしましょう。ユーザーがスクロールできる余裕があるかどうか（scrollableHeight）を追跡できるようになったので、ユーザーが利用可能なコンテンツをすべてスクロールしたかどうかを確認できます。

すべてのコンテンツがスクロールされると、画像APIに呼び出しを行い、新しい画像を取得します。新しい画像が読み込まれている間、ユーザーに対して読み込みサインを表示しましょう。

以下は無限にスクロール可能なHTML要素です。すべての犬の写真が表示されたら、Dog Pic API に呼び出しを行い、新しい画像を取得します。

この新しい画像はAPIから取得され、読み込まれ、コンテナに追加されます。これらが起こる間、新しいAPI呼び出しを行わないようにします。

以下がコードです:

<script>
let fetchingImage; // 画像が取得中かどうかを確認する変数
let tolerance = 5; // コンテンツの終わりを検出するときの許容誤差は5px
let image = new Image(); // 画像を初期化

// 最初の3つの画像を初期化
let sources = [
	'https://images.dog.ceo/breeds/sheepdog-english/n02105641_3540.jpg',
	'https://images.dog.ceo/breeds/husky/n02110185_7936.jpg',
	'https://images.dog.ceo/breeds/terrier-lakeland/n02095570_3224.jpg'
];

// 画像リンクをHTMLのimg要素にマップする
images = sources.map((src) => {
	img = image.cloneNode(true);
	img.src = src;
	return img.outerHTML;
});

async function handleScroll() {
	if (!fetchingImage && container.scrollTop + container.clientHeight > container.scrollHeight - tolerance) {
		fetchingImage = true;
		let response = await fetch('https://dog.ceo/api/breeds/image/random'); // APIに呼び出しを行う
		let doggie = await response.json();

		img = image.cloneNode(true);
		img.onload = function () { // 画像が読み込まれるのを待つ
			fetchingImage = false; // 画像が読み込まれたかどうかを確認する
		};

		// APIから取得したリンクをsrcに割り当てる
		img.src = doggie.message;

		// 新しい画像をimages配列に追加する。この配列はコンテナを満たす
		images = [...images, img.outerHTML];
	}
}
</script>

<div class="relative">
	<div bind:this={container} on:scroll={handleScroll}>
		{#each images as img}
			{@html img}
		{/each}
		{#if fetchingImage}
			<LoadingIcon />
		{/if}
	</div>
</div>