Spaを構築すると、無限スクロールの技術を使用してデータを表示する必要があることがあります。

Intersection Observer APIがブラウザに追加されて以来、再利用可能な無限スクロールコンポーネントの構築はかつてないほど容易になりました。 このAPIを使用してそのようなコンポーネントを作成する方法を学びましょう。Intersection Observer APIについては詳しく説明しませんので、慣れていない場合は、事前にこの記事を読むことをお勧めします。

主な概念は、ユーザーがそのリストの一番下に到達したときにデータを追加するために、表示された項目のリストの最後に観測可能な要素を配置するこ

可能な限り柔軟にしたいので、消費者にng-contententriesIntersectionObserverisIntersectionisIntersectingがtrueの場合、ターゲット要素は渡されたしきい値と少なくとも同じくらい可視になりました。 デフォルトのしきい値は0で、一つのピクセルが表示されるとすぐにコールバックが実行されます。次に、observe()メソッドを呼び出し、アンカー要素を渡します。 これにより、この要素の観察が開始されます。

Scroll Support Scrollable Containers

rootnullroot要素として機能させたい場合があります。 この機能をサポートしましょう:

現在のホスト要素がスクロール可能なコンテナであるかどうかを確認するチェッ そうであれば、それをroot要素として設定します。最後に、アプリケーションでメモリリークが発生しないようにするため、コンポーネントが破壊されたときにオブザーバーを切断します。

のは、我々はそれを使用する方法を見てみましょう:

またはスクロール可能なコンテナで:

ブラウ>intersection observer apiは、ほとんどの主要なブラウザで動作します。 IEなどの古いブラウザをサポートする必要がある場合は、実行時にscrollイベントにpolyfillまたはfallbackを読み込むことができます。

🚀あなたはまだ秋田を試してみましたか?

主要な状態管理ライブラリの一つ、秋田は無数の本番環境で使用されています。 それは絶えず成長し、改良しています。

サーバーから到着するエンティティであろうとUI状態データであろうと、秋田にはカスタムビルドのストア、強力なツール、カスタムメイドのプラグインがあり、データを管理し、膨大な量の定型コードの必要性を排除するのに役立ちます。 私たち/私は非常にあなたがそれを試してみることをお勧めします。

Angular、Akita、JSについての詳細を読むために、MediumまたはTwitterで私に従ってください!

コメントを残す

メールアドレスが公開されることはありません。