> Week 6. 無限スクロールと交差observer

無限スクロール

モバイル環境で多く使用されています.

注意事項

はデータを取得(ロード中)しており、上下にスクロールするとロードを続行します.
👉🏻 isLoadingをstate値に入れ、取得が完了した場合にのみデータ

を再要求する.

スクロールイベントが発生するたびに、値を確認する必要があります.
👉🏻 ポーリング処理により、一定時間おきにイベントが処理されます.

実施方法

ロールイベントとして計算

は、コンテンツの最後にスクロールされた位置を確認し、画面の完全な高さまでスクロールするために使用される.

長所

IEも使用可能です.

に質問

は、完全なコンテンツを受信するが、最後に到達してもデータを要求する.
👉🏻 完全なコンテンツ長を含むAPIを使用して防御コードを挿入
👉🏻 そうでなければ.複雑...?

交差点観察方式
私が指定したDOMオブジェクト(observer)が表示されているビューポート(デフォルト)に触れているかどうかを検出します.
MDN: Intersection Observer API
監視するエレメントが別のエレメント(viewport)に入るか離れると
または、2つの要素の交差部分が変更された場合、要求された部分に基づいて実行するコールバック関数を登録できます.

const observer = new InterSectionObserver(callback, options);

const callback = entries => entries.forEach(entry => { 
  // entry 대상 여러개 지정 가능
  entry.isIntersecting && console.log(화면 끝!, entry)
})

const options = {
  root: // 기본: null(= viewport), 감시할 요소를 제한시킬 때 상위 부모를 넣기
  rootMargin: // root가 가진 여백. 여유를 주는 것.
  threshold: // 가시성 퍼센티지. 요소가 몇 만큼 보여졌을 때 탐지할 것이냐 - 🧐 
}

// 감시할 요소: observer.observe(감시 대상)
// 앞의 감시 요소 풀어주기: observer.unobserve(감시 풀 대상)

使用率:イメージ遅延ロードなど

技術

は、画面上の画像のみをロードする

ブラウザごとに1回に読み込まれるイメージの数が異なります.

注意事項

無限スクロール

画像の場合、画像のmin-heightを指定します.

の画像が付着していれば、スクロールが終了したと考えられます.

min-heightを貼り、最初のレンダリング時にスクロールを生成します!

観察、非観察主義

長所

スクロールイベントなし、パフォーマンスの問題が

減少

のスクロール長を計算する必要がなく、直感的な

短所

IEは使用できません.ポリエステルが必要です.

に感銘を与える

無限スクロールは実際の作業で非常に多く使用されています.
私の知っている限りでは、企業の実施問題においてもよくある問題です.
実現は難しくなく、交差点観察者を簡単に作ることができます.
意外とびっくりしました(!)