IntersectionObserver APIを使用したネイティブの無限スクロール-jsチュートリアル-php.cn

IntersectionObserver APIを使用したネイティブの無限スクロール

Joseph Gordon-Levitt

リリース： 2025-02-17 09:49:08

オリジナル

797 人が閲覧しました

Native Infinite Scrolling with the IntersectionObserver API

交差点オブザーバーAPI：DOM要素の可視性を効率的に監視します

交差点オブザーバーAPIは、指定されたDOM要素の可視性を効率的に監視するための新たなクライアント側JavaScript APIです。

ブラウザのサポートとポリフィル

このAPIは比較的新しく、現在、Chrome Desktop Edition 51、Chrome Android Edition 51、Android WebView 51、Opera 38、Opera Android Edition 38など、ブラウザのサポートが限られています。ただし、開発中のポリフィルがGitHubで提供されているため、開発者はすぐに交差点オブザーバーの使用を開始できます。

Infiniteスクロール実装ガイド

この記事では、ページ設定、スクリプト作成、Sentinel Element Managementなどの無制限のスクロールユーザーエクスペリエンスモードを実現するために、IntersectionObserver APIとPolyFillを使用する方法に関する詳細な説明を提供します。このガイドには、Promise、テンプレート文字列、矢印関数などのES6/ES2015機能が含まれています。

コアコンセプト：Sentinel Element

無限のスクロールの実装の中心的なアイデアは、リストの下部にある要素を「センチネル」として使用することです。これにより、ブラウザウィンドウがページの下部に近づくと、より多くのコンテンツがロードされます。

ページ設定（html）

ページボディ構造は簡単なリストです：

<ul class="listview"></ul>

ログイン後にコピー

コードを簡素化するには、初期リスト項目と後続の両方のページの両方がJavaScriptを介して動的にロードされます。また、PolyFillを含めて、APIがサポートしていない場合はプロンプトメッセージを表示します。

CSSスタイルは、リストビューレイアウトを設定し、プロンプトスタイルをサポートするために使用されます（詳細については、スタイルシートを参照）。

<div class="polyfill-notice">The polyfill is in use</div>
<🎜>

ログイン後にコピー

スクリプト作成（javascript）

最初に、

オブジェクトをインスタンス化します：

IntersectionObserver

sentinelObserver = new IntersectionObserver(sentinelListener, {threshold: 1});

ログイン後にコピー

は、要素が完全にウィンドウ内にある場合にのみ、イベントリスナーがトリガーされることを意味します。センチネルの要素は、デモ中にオレンジ色の境界線でマークされています。

threshold: 1イベントリスナーは、現在のセンチネルの削除、リストの下部にロードインジケーターの設定、

メソッドを使用して次のページをロードするなどの操作を実行します。

メソッドは、これらの操作がいつ完了したかを示す約束を返します。その後、新しいセンチネル要素を選択して、負荷インジケーターをオフにすることができます：nextPage nextPage

sentinelListener = function(entries) {
  sentinel.unset();
  listView.classList.add('loading');
  nextPage().then(() => {
    updateSentinel();
    listView.classList.remove('loading');
  });
};

ログイン後にコピー

メソッド新しいセンチネルを選択し、新しくロードされたページの最初の要素を選択します。

updateSentinelコードの残りの部分は、主に

関数を実装しています。

updateSentinel = function() {
  sentinel.set(listView.children[listView.children.length - pageSize]);
};

ログイン後にコピー

（シミュレートされたネットワークリクエスト）によって返される約束が解決されると、提供されたプロジェクトオブジェクトがHTMLにレンダリングされ、リストの最後に追加されます。

nextPageloadNextPage()さらに読み取り

APIおよびその原則に関する詳細なドキュメント：

交差点屋が表示されている

を説明しました
交差点オブザーバーAPI faq

（元のテキストには完全で明確な答えが含まれているため、FAQセクションはここで省略されています。）

以上がIntersectionObserver APIを使用したネイティブの無限スクロールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。