JavaScriptでスクロールした時の判定やスクロール量の計算に便利なscrollイベントの使い方

スクロール判定やスクロール量の計算に便利なscrollイベント

scrollイベントは、対象の要素がスクロールした時に発生するイベントです。

主にwindowに対して使用します。

イベント

イベント意味
scroll対象の要素がスクロールした時
scrollイベント

プロパティ

プロパティ意味
window.scrollXウィンドウ上X座標軸でどれくらいスクロールしたか
window.scrollYウィンドウ上Y座標軸でどれくらいスクロールしたか
Scrollプロパティ

サンプルコード

サンプルコードとして、ウィンドウ上でスクロールするたびに、ウィンドウの左上からのスクロール量を出力するサンプルコードを紹介します。

Output

スクロールイベント履歴

Pug
p スクロールイベント履歴
	#targetText
JavaScript
// 操作対象エリア
const targetText = document.getElementById('targetText');

window.addEventListener('scroll', () => {
	targetText.textContent = `スクロールを検知しました。X座標の移動量は${window.scrollX}で、Y座標の移動量は${window.scrollY}です。`;
});

インストラクター
コメント

コメントを残す