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

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

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

 

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

 

 

目次

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タグは色を交互に入れ替えています。そして、スクロール位置を移動させるためのボタンをその下に用意しておきます。

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

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サービス公開を習得できる、オンラインブートキャンプを開催しています。

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