Infiniteスクロールは、ユーザーがページをスクロールダウンすると、継続的に新しいコンテンツを読み込むことによって、ウェブサイトでユーザーエンゲージメントを高めるために使用される人気のある技術です。 このアプローチは、訪問者がより長く従事し、シームレスな閲覧体験を提供します。 JavaScriptで無限スクロールを実装することは簡単です。ソーシャルメディアフィードからeコマース製品リストまで、さまざまなウェブサイトのニーズに合わせてカスタマイズできます。 この記事では、なぜ、どのように、無限スクロールのベストプラクティス、拡張されたコード例とパフォーマンス検討を完了するかを説明します。

なぜInfiniteスクロールを使用するのですか?

Infiniteスクロールは、ユーザーエンゲージメントとサイトのパフォーマンスに直接影響するいくつかの利点を提供します。

  • []ページリロードと手動クリックを解除することで、ページリロードとよりスムーズで直感的に閲覧できます。ユーザーは、中断することなくコンテンツを探索できます。
  • []コンテンツの発見を奨励:[]:新しいアイテムが自動的にロードされるにつれて、訪問者は、追加記事、製品、または投稿が、そうでなければ見逃す可能性がある可能性が高い。
  • []ユーザエンゲージメントメトリックの改良:[ページ上の時間、セッションごとのページ、および閲覧の自然な流れが維持されるため、スクロール深さが頻繁に増加します。
  • モダンでダイナミックなユーザー体験を提供します。[ Twitter、Pinterest、Instagramなどの多くの人気プラットフォームは無限スクロールを使用して、Web上でアプリのような感じを作成します。

しかし、すべてのコンテキストでは無限スクロールは適切ではありません。ユーザーが特定の項目を素早く見つける必要があるサイト(例えば、ディレクトリリストや検索結果)は、フッターまたは「ロードモア」ボタンで古典的なページネーションから利益を得ることができます。決定は、ユーザーインテントとコンテンツ構造に基づいて行う必要があります。

Infiniteスクロールの基本的な実装

基本的な無限スクロールを実装するには、イベントをリスニングし、ユーザーがページの下部に近づくと新しいコンテンツを追加することが含まれます。 以下は、簡単なバージョンを構築するステップバイステップガイドです。

HTML 構造

初期コンテンツを保持するコンテナ要素を設定します。新しい項目はここに追加されます。

<div id="content">
 <!-- Existing items loaded on page load -->
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
<div id="loading-indicator" style="display:none;">Loading more content...</div>

JavaScript の例

スクロールイベントを使用して、ユーザがページの下部の横にスクロールした時に検出します。 しきい値([)は、トリガーが遅くなるのを防ぎます。

const contentDiv = document.getElementById('content');
const loadingIndicator = document.getElementById('loading-indicator');
let isLoading = false; // Prevent duplicate requests

window.addEventListener('scroll', () => {
 const scrollPosition = window.innerHeight + window.scrollY;
 const documentHeight = document.body.offsetHeight;

 if (scrollPosition >= documentHeight - 200 && !isLoading) {
 loadMoreContent();
 }
});

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 // Simulate fetching new content from server
 const newItem = document.createElement('div');
 newItem.className = 'item';
 newItem.textContent = `New item loaded at ${new Date().toLocaleTimeString()}`;
 contentDiv.appendChild(newItem);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

導入の充実

制作準備が整った無限スクロール、性能、ユーザー体験を洗練する必要があります。

スクロールイベントのデバイン

生のスクロールイベントは、パフォーマンスを劣化させることができる、急速に火災します。 欠損機能を使用して、スクロールの短い一時停止後にのみチェックが実行されます。

function debounce(func, wait) {
 let timeout;
 return function executedFunction(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

window.addEventListener('scroll', debounce(checkScrollPosition, 100));

断面observer API の使用

より効率的でモダンなアプローチは]セクションオブザーバーです。 コンテンツの下部に配置された送信要素を監視し、表示したときにコールバックを発射します。

const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
contentDiv.after(sentinel);

const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting && !isLoading) {
 loadMoreContent();
 }
});
observer.observe(sentinel);

スクロールリスナーを取り付ける必要がなくなり、メインスレッドに大幅に軽くなります。

コンテンツの処理 うまく処理

より多くのデータが存在しない場合、無限スクロールはロードしようとする試みを停止する必要があります。 [] プロパティを持つサーバーからの単純なフラグまたは応答はこの制御することができます。

let hasMoreContent = true;

async function loadMoreContent() {
 if (!hasMoreContent) return;
 // ... fetch data
 if (response.data.length === 0) hasMoreContent = false;
}

AJAX で実際のデータを読み込み

無限スクロールを動的にするには、AJAX を使用してサーバーからデータを取得する必要があります。 Fetch API は、現代の標準です。

Fetch API の例

この例では、サーバーが [ URL またはページ番号パラメーターで、JSON の paginated データを渡すことを想定しています。

const contentUrl = '/api/items?page=1';
let currentPage = 1;

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 const response = await fetch(`/api/items?page=${++currentPage}`);
 if (!response.ok) throw new Error('Network error');
 const data = await response.json();

 data.items.forEach(item => {
 const el = document.createElement('div');
 el.className = 'item';
 el.textContent = item.title;
 contentDiv.appendChild(el);
 });

 // If the server indicates no more data, disable loading
 if (data.is_last_page) hasMoreContent = false;
 } catch (error) {
 console.error('Failed to load content:', error);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

サーバーの応答とエラーの処理

常に強力なエラー処理を含みます。フェッチが失敗した場合は、リトリーオプションを表示し、レトリーを制限することにより無限のロードループを避けます。より良いユーザーエクスペリエンスのために、「やり直しが間違っていた」メッセージを「もう一度乾か」ボタンで表示します。

ユーザーエクスペリエンスの強化

スムーズなUXは、ユーザーを保持するために不可欠です。 考慮するいくつかの改善があります。

ローディングの表示器

スピナー、プログレッシブバー、またはスケルトン画面を使用して、より多くのコンテンツが取得されていることを示します。 この理由は、サイトが動作しているユーザーを安心します。

<div id="loading" class="loading-spinner"></div>

スピナー用のCSSアニメーションは軽量です。スケルトン画面では、最終コンテンツレイアウトを模倣するプレースホルダーブロックを作成します。

アクセシビリティの検討

アクセシブルな無限スクロールは要求します:

  • フォーカス管理:]]]の新規アイテムがロードされると、の領域を使用してスクリーンリーダーにそれらを発表しました。
  • []キーボードナビゲーション:]]]] ユーザーがキーボード(Tab)を介して新しく読み込まれたコンテンツを横断できるようにします。 フォーカスをトラップしないでください。
  • 無限スクロールに代替:[]明示的な制御を好むユーザーのためのフォールバックとして「Load More」ボタンを提供します。
<div id="content" aria-live="polite">...</div>

モバイル最適化

モバイルデバイスでは、スクロールイベントが頻繁に発火しますが、断面オブザーバーはより信頼性があります。また、より小さなビューポートと接触慣性のために考慮するしきい値を調整します。

高度な技術

ソーシャルメディアフィードや大型カタログなどの高性能な状況では、これらの最適化を検討してください。

レイジーローディングイメージ

新規コンテンツには、多くの場合、画像が含まれています。 ] 属性を使用して、これらの タグまたは セクション Observer] を使用して読み込み、帯域幅を減らし、初期負荷時間を向上します。

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="..." />

大型リストの仮想スクロール

無限スクロールが DOM ノードの何千ものノードを管理している場合、パフォーマンスは劣化します。仮想スクロール(またはウィンドウング)は、可視項目だけをレンダリングし、メモリの使用量を劇的に削減します。Clusterize.js]] や React Virtualized などのライブラリは、単純なケースでは、純粋な JavaScript の実装が可能です。

コンテンツの読み込み

認識されたラグを除去するには、必要な前に、次のコンテンツのバッチを隠しコンテナに読み込む。 ユーザーがトリガーポイントにスクロールすると、プリロードされた要素を可視された DOM に交換するだけで済みます。

コンテンツ

JavaScript で無限スクロールを実装することで、スムーズで継続的な閲覧体験を提供することで、ユーザーのエンゲージメントを大幅に向上させることができます。基本的なスクロールリスナーから高度なインターセクションの Observer とレイジーローディングまで、あらゆるウェブサイトのニーズに合わせて技術を調整することができます。パフォーマンスとアクセシビリティのバランスをとり、常にディスクリートのパジネーションを好むユーザーのためのフォールバック機構を提供します。コードと戦略は、ここに輪郭を当て、あなたの聴衆が不満をすることなく探索し続ける無限スクロール機能を作成することができます。