JavaScript | スクロールをトリガーにしたイベントを実装する方法

2023-12-11JavaScript イベント,JavaScript

JavaScript | スクロールをトリガーにしたイベントを実装する方法

Javascriptでスクロールをトリガーにした発火イベントの実装方法を紹介しています。

スクロールをトリガーにしたイベントの実装サンプル

JavascriptのaddEventListener()を使ったスクロールをトリガーにしたイベントの実装サンプルとサンプルコードになります。

See the Pen JavaScript | Events triggered by Full screen mode by yochans (@yochans) on CodePen.

イベントの発火を確認するための出力用に<p>タグをひとつ設置しています。

<p id="output">0</p>

サンプルではスクロール可能な領域を確保する為に、CSSにて<body>の高さを5000pxに指定しています。

また、出力用の<p>タグはpositionプロパティに「 fixed」を指定して固定しています。

body {
	height: 5000px;
}

#output {
	position: fixed;
	top: 0;
	font-size: 60px;
	color: #4169e1;
	margin: 10px;
}

スクロールを取得するにはwindowに対してquerySelector()にて「scroll」を指定します。

出力用の<p>タグは変数名は「output」を指定しています。

let output = document.querySelector('#output');

window.addEventListener('scroll', () => {
	output.innerHTML = window.pageYOffset;
});