【JavaScript】マウスホイールした時のスクロール量を表示する方法

JavaScriptでページをマウスホイールした時のスクロール量を取得。表示したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
JavaScriptでスクロール量を表示 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
上記コードペンの画面上でマウスを使いスクロール。
スクロール量を右上にリアルタイムで表示してます。
実装方法は以下の通りです。
スクロール量を表示する
// スクロール量を表示するエレメント
const span = document.querySelector('span');
// スクロールイベント
window.addEventListener('scroll', ()=> {
//スクロール量を取得・表示
span.textContent = window.pageYOffset;
});
スクロール量を表示するコード例です。
window.pageYOffsetを使うことで垂直方法にスクロールした量を取得する事ができます。
addEventListenerでスクロールイベントを実行。
上記イベント内にwindow.pageYOffsetを定義する事でスクロール量をリアルタイムで取得する事ができます。
以上で実装完了です。
まとめ
JavaScriptでマウスホイールした時のスクロール量を表示する方法について紹介しました。
以上で解説を終わります。
目次