無限スクロールを作成する:JavaScriptのIntersection ObserverにFetchを組み込んだプログラム
サイトの無限スクロールのプログラムのアイデアは大きく二つの部分に分けられる。一つは要素判定で、今のページが画面のどこまで来たら次のページを表示するように動作するかを決める。もう一つは生成処理で、次のページをAjax通信でサーバーから読み込んで今のページに実際に追加する。JavaScriptのプログラムで前者に正しく画面と要素の交差を監視できて最適な Intersection Observer API 、後者にAjax通信の時間差の難点も克服できて便利な Fetch API を使って無限スクロールを作成する方法を取り上げる。 無限スクロールのプログラムの基本的な流れ Brown grasses under white clouds at daytime by Glenn Carstens-Peters / Unsplash 通常、同じデザインのページがページネーションのリンクで幾つも続いて行くのを無限ス…