【JavaScript】「element.scrollHeight」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

JavaScriptでDOMを操作していると、スクロールの高さを計算したい場面があります。

この時に有用なのが「scrollHeight」です。

この記事では、scrollHeightの基礎から実践的なテクニックまで解説します。

また、下の動画でも「element.scrollHeight」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「element.scrollHeight」を使うと何ができるのか？

「element.scrollHeight」を使うと要素の高さを取得することができます。

その要素の高さというのは、実際に画面に表示されている高さではなく「スクロールできる範囲も含めた高さ」となります。

また、「padding」や「border」も含めた高さになります。

「element.scrollHeight」の使い方！

<div class="container">
  <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
  <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
  <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
  <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
</div>

@charset "utf-8";

html {
    font-size: 16px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 1000px;
    margin: 100px auto;
    font-size: 40px;
    height: 300px;
    outline: 2px solid red;
    overflow-y: scroll;
}

"use strict";


const container = document.querySelector('.container');


console.log( container.scrollHeight );

「element.scrollHeight」を実際に使ってみるとこんな感じです。

その要素の高さというのは、実際に画面に表示されている高さではなく「スクロールできる範囲も含めた高さ」となっているのが確認できると思います。

参考リンク！

仕様書。
https://drafts.csswg.org/cssom-view/#dom-element-scrollheight

MDN。
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight

おすすめの再生リスト！

こちらは僕が制作したYouTubeの再生リスト「JavaScriptの入門編」です。

「JavaScriptの入門編」はWeb制作を勉強している方がJavaScriptに入門する際に知っておきたい情報をまとめたコンテンツとなります。

こちらの再生リストで「JavaScript」について「丁寧」に解説しているので、もし気になる方はチェックしてみてください！一緒に楽しく学習しましょう！！

まとめ！

「element.scrollHeight」は、要素の高さを知るための基本的なプロパティです。

その要素の高さというのは、実際に画面に表示されている高さではなく「スクロールできる範囲も含めた高さ」ということが重要です。

正しく理解し、プロジェクトで最大限に活用しましょう！

この情報が役に立てば幸いです。試してみてください！

また、下の動画でも「element.scrollHeight」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまたっ！