Zenn
🎃

自動スクロールのときに高さを取得したい

に公開
JavaScript
React
JavaScript
tech

はじめに

JavaScriptを用いてHTML要素の高さを取得する方法についてです。
clientHeight、offsetHeight、scrollHeightという3つのプロパティがどんなものかまとめました
Reactを使っていて、自動でスクロールをしたいとき、これらを使って高さを取得しました。

clientHeight

clientHeightプロパティは、要素の内部の高さをピクセル単位で返します。
この高さは以下の要素を含む

  • 要素のコンテンツ
  • 要素の水平方向のパディング

以下の要素は含まない

  • ボーダー
  • スクロールバー
  • 垂直方向のパディング

例

const element = document.querySelector('.element');
const height = element.clientHeight;
console.log(height);

offsetHeight

offsetHeightプロパティは、要素の見た目上の全高さをピクセル単位で返します。
この高さは以下の要素を含む

  • 要素のコンテンツ
  • 水平および垂直方向のパディング
  • ボーダー
  • スクロールバー

例

const element = document.querySelector('.element');
const height = element.offsetHeight;
console.log(height);

scrollHeight

scrollHeightプロパティは、要素のスクロールビューの高さをピクセル単位で返します。
これには以下の要素を含む

  • 要素のコンテンツ
  • 水平および垂直方向のパディング

しかし、ボーダーやスクロールバーは含まれません。また、overflowスタイルプロパティがvisibleに設定されている場合、その領域も含みます。

例

const element = document.querySelector('.element');
const height = element.scrollHeight;
console.log(height);

Discussion