JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について現役エンジニアが解説しています。スクロール量を取得・設定する方法は、スクロールが発生してるHTML要素を取得し、scrollTopプロパティを取得、または値を設定します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでscrollTopプロパティを使って要素のスクロールされるピクセル数を取得、設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

  1. scrollTopプロパティとは
  2. scrollTopプロパティの使い方
  3. 要素のスクロールされるピクセル数を取得する方法
  4. 要素のスクロールされるピクセル数を設定する方法
  5. 実際に書いてみよう
  6. まとめ
  7. 著者プロフィール

 

scrollTopプロパティとは

scrollTopは、Elementオブジェクトのプロパティです。Elementの一番上からのスクロール量をピクセル単位で設定や取得できます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

scrollTopプロパティの使い方

Elementのプロパティなので、HTMLのスクロールが発生しているタグを取得します。その取得したタグのElementに.scrollTopと続けて記述することで使うことができます。

要素のスクロールされるピクセル数を取得する方法

HTMLのソースでスクロールが発生しているタグを取得し、.scrollTopとすることでその時のスクロールしている量を取得できます。

スクロールしていなければ0、100ピクセルのスクロールをしていれば100を取得することになります。

要素のスクロールされるピクセル数を設定する方法

HTMLのソースでスクロールが発生しているタグを取得し、そのプロパティである.scrollTopに値を代入することで設定ができます。

設定した値が0ならばスクロールの一番上になり、100ならば100ピクセルスクロールした位置に移動します。

実際に書いてみよう

まずはスクロールが発生するようにHTMLとCSSを準備します。

親のdivタグに200pxの高さを指定し、overflow-y: scrollとすることで200pxをこえた分がスクロールされるようにします。その中に高さ200pxのdivタグを5つ格納します。これで高さ200pxの親divの中に、子のdivが200px×5で合計1000pxの高さが入り、800px分のスクロールが行われるようになりました。

スクロールしていることが見えやすいようにdivタグは色を交互に入れ替えています。そして、スクロール位置を移動させるためのボタンをその下に用意しておきます。

下記のような画面になります。

JavaScriptでボタンを押すと、scrollTopの値を取得して、スクロール位置を移動させるサンプルプログラムの実行結果。

HTML

<div class="outer" id="target">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<button id="actionButton">スクロールの真ん中に移動する</button>

 

CSS

.outer{
  background-color: skyblue;
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}
.outer div{
  background-color: pink;
  width: 50px;
  height: 200px;
}
.outer div:nth-child(even){
  background-color: gray;
  width: 50px;
  height: 200px;
}

 

JavaScript

//スクロール量をコンソールに表示する処理
let target = document.getElementById('target');
target.onscroll = () => console.log(target.scrollTop);

//ボタンを押したらスクロール位置400に移動する処理
let actionButton = document.getElementById('actionButton');
actionButton.onclick = () => target.scrollTop = 400;

JavaScriptでは、プロパティの参照と代入だけなのでシンプルな処理になっています。

スクロールするElementであるidがtargetという名前のdivタグを取得し、スクロールが発生するごとにコンソールにスクロール量を出力しています。スクロールの発生は、onscrollというイベントハンドラ(イベントを処理する部品)を使うことで対応できます。

スクロールの位置を移動させる処理は、ボタンがクリックされたら実行するようにしています。クリックの発生は、onclickというイベントハンドラを使うことで対応できます。ボタンが押されたらスクロールするElementのscrollTopに400を設定しています。

これでスクロール位置が400の場所に移動します。

まとめ

スクロール量を把握することでどこまでをユーザーが見たかを把握できます。また、スクロールが長くなった場合に、特定のスクロール位置に移動できるようにすることでユーザーの操作を助けることができます。

scrollTopというプロパティをぜひ活用してみてください。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。