• JavaScript

【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でマウスホイールした時のスクロール量を表示する方法について紹介しました。

以上で解説を終わります。