Written by Kasumi

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

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

目次

関連記事

JavaScript

JavaScriptを使い、目次をプラグイン無しで自動生成する方法

2022.10.31
521
JavaScript

【JavaScript】親要素から子要素を取得する方法

2023.01.30
472
JavaScript

【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

2023.01.02
696
JavaScript

JavaScriptで小数点を切り上げ・切り捨て・四捨五入。整数にする方法

2023.01.13
442