ブラウザへの負荷軽減!Intersection Observer APIを使用した実装例

ブラウザへの負荷が少ない「Intersection Observer API」を使用したJavaScriptの実装例を紹介します!

[ ID : 9133 ]

13 件の記事を表示

JavaScript, JS
実装目安
3分

【Vanilla JS】スクロール途中でページトップボタンを表示して、フッターが画面内に入ると非表示にする処理(Intersection Observer API使用)

Loading 有料記事
シルバー
[ ID: 7175 ]

ページトップボタンをスクロールの途中で表示させ、フッターが画面内に入ったタイミングでページトップボタンを非表示にする処理を、Intersection Observer APIを使用して実装する方法を紹介。

JavaScript, JS
実装目安
3分

【Vanilla JS】スクロール途中でPageTop(トップへ戻る)ボタンをフェードインで表示し、フッター上で固定する(Intersection Observer API、position: sticky 使用)

Loading 有料記事
シルバー
[ ID: 8732 ]

ページ最上部から一定量スクロールするとページトップが表示され、フッターまで来たタイミングでフッター上にページトップを固定する処理の実装方法を紹介。

記事セット一覧へ戻る

このページをシェアする

KONOCODEのメリット 無料会員登録