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でブラウザにデータを保存する方法【Local Storageを使おう】

2022.11.19
4578
JavaScript

Swiperでスライドの幅を固定・中央寄せにする方法

2023.10.04
5198
JavaScript

【CSS・JS】本文を透過グラデーションで隠して、もっと見るボタンで開閉するアコーディオンを実装する方法

2023.01.28
5644
JavaScript

JavaScriptを使って別ページにリダイレクトさせる方法

2022.12.13
1485