出版日: 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>
上記のコードを使用して、以下のコンテナを作成し、無限にスクロールすることができます。コンテナの一番下に到達すると、API呼び出しが行われ、新しい犬の写真が追加されます。ですので、犬の写真を見ながら無限にスクロールすることができます。天国のようですね?
質問があればお知らせください。
ハッピーハッキング!
このブログは英語からChatGPTによって翻訳されました。不明な点がある場合は、お問い合わせページからご連絡ください。
コメントを残す
コメント
その他のブログ
2024/06/19
SvelteとJavaScriptを使用してシンプルで動的なツールチップを作成する
2024/06/17
JavaScriptを用いて東京都のインタラクティブな地図を作成する
2024/06/14
Matplotlibで日本語文字化けを解決できる簡単な方法
2024/06/13
書評 | トーキング・トゥ・ストレンジャーズ 「よく知らない人」について私たちが知っておくべきこと by マルコム・グラッドウェル
2024/06/07
日本語で最もよく使われる3000字の漢字
2024/06/07
VSCodeでRegexを使用してReplaceする方法
2024/06/06
SvelteではReadable Storeを使用するな
2024/06/05
GzipとPakoでデータを圧縮してWebサイトのローディング速度を上げる方法
2024/05/31
JavaScriptを使用してWebページ上でマウスが指している単語を特定する
2024/05/29
SvelteとSVGを用いてインタラクティブな地図を作成する
2024/05/28
書評 | Originals 誰もが「人と違うこと」ができる時代 by アダム・グラント & シェリル・サンドバーグ
2024/05/27
Javascriptを使用して数独を解く方法
2024/05/26
ウェブサイトへのトラフィックを1か月で10倍に増やした方法
2024/05/24
人生はサイクリングに似ている
2024/05/19
JavaScriptでバックトラッキング・アルゴリズムを用いて完全な数独グリッドを生成する
2024/05/16
Tailwindが素晴らしい理由とWeb開発をいかに楽にするか
2024/05/15
PythonとGitフックを使用してサイトマップを自動的に生成する
2024/05/14
書評 | Range (レンジ) 知識の「幅」が最強の武器になる by デイビッド・エプスタイン
2024/05/13
SvelteとSvelteKitはなんですか?
2024/05/12
SvelteKitで国際化(多言語化)
2024/05/11
SvelteでCachingを用いてDeploy時間を短縮する方法
2024/05/10
SvelteとIntersection Oberverによるレイジーローディング
2024/05/10
遺伝的アルゴリズムで最適な株式ポートフォリオを作る方法
2024/05/09
Pythonを用いてShapeFileをSVGに変換できる方法
2024/05/08
Svelteの反応性:変数、バインディング、およびキー関数
2024/05/07
書評 | 孫子の兵法
2024/05/06
スペシャリストは終了。ゼネラリスト万歳!
2024/05/03
トルコ人の有権者の投票行動をPythonでの分析
2024/05/01
Seleniumを用いてトルコ投票データベースを作る方法
2024/04/29
1年間以内で日本語を駆使できるようになるための方法
2024/04/25
SvelteとTailwindを用いたWebサイトテンプレート
2024/01/29
怠惰なエンジニアとひどいデザイン
2024/01/28
偉大さについて
2024/01/28
MacBook で PDF を PNG に変換する
2023/12/31
2023年振り返り:24冊の読んだ本のまとめ
2023/12/30
Python PILを使用して写真コラージュを作成する方法
2024/01/09
ウェブサイトの訪問者のデバイスとブラウザを検出する方法
2024/01/19
ChatGPT回答の解析