Material Box

Material Box

WEBデザイン & フリー素材

JavaScript - スクロールの操作を検出する

JavaScript

JavaScriptでスクロールの操作を検出してスクロール量を取得する方法とコード例を作成しています。


HTMLには、スクロール量を表示する用の要素にid名「output」を指定ています。

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

スクロールの操作をトリガーにしたイベントはaddEventListener()で「scroll」を指定する事で作成可能です。
スクロール量は「pageYOffset」で取得する事ができます。

コード例ではブラウザウィンドウに対してのスクロールの検出、スクロール量を取得しています。

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

JavaScript - スクロールの操作を検出する

TitleJavaScript - スクロールの操作を検出する

CategoryJavaScript

Created

Update

AuthorYousuke.U