このページでは、ページをスクロールしたときの距離をリアルタイムで知るための方法について見ていきます。お気づきだとは思いますが、このページの左上にも実際に現在のスクロール値を表示させてみました。ここではこのような感じでどのくらいスクロールされているかを表示させるコードを見てみましょう。

ボタンで表示を切り替えてご覧ください。

See the Pen scroll amount by kenichi (@ken81) on CodePen.

右側のウィンドウをスクロールすると数字が左上に出るのが確認できると思います。

HTML

<div id="scrollValue" style="position:fixed; font-size:50px;"></div>

HTMLは任意のid名を付けた空divを設定するだけです。JavaScriptの使用に当たってjQueryを読み込ませる必要がありますので、ページのhead内に読み込まれていない場合は設定してくださいね。

JavaScript

function onScroll() {
      var infoF = document.getElementById("scrollValue");
      infoF.innerHTML = document.documentElement.scrollTop;
}
window.onscroll = onScroll;

ポイントはscrollValueという任意のid名を付けた要素を用意して、このid名に対してJavaScriptでスクロール値を表示させるコードを記入しているという点です。よかったらコピペしてお使い下さい。