JavaScript

ページをスクロールした距離をリアルタイムで知りたい

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

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

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でスクロール値を表示させるコードを記入しているという点です。よかったらコピペしてお使い下さい。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP