【完全網羅】JavaScriptでドキュメント全体の高さを取得：方法とサンプルコード集

JavaScript でドキュメント全体の高さを取得する方法

documentElement.scrollHeight プロパティを使用する

このプロパティは、HTML 要素（ドキュメント全体をラップするコンテナ）のスクロール高さを取得します。スクロールバーを含む高さが取得されます。

const documentHeight = document.documentElement.scrollHeight;
console.log(documentHeight);

body.scrollHeight と body.offsetHeight プロパティを組み合わせて使用する

この方法は、より正確な高さを取得するために使用されます。

• body.scrollHeight は、body 要素のスクロール高さを取得します。スクロールバーを含む高さが取得されます。

2 つの値のうち、大きい方をドキュメント全体の高さとして使用します。

const bodyScrollHeight = document.body.scrollHeight;
const bodyOffsetHeight = document.body.offsetHeight;
const documentHeight = Math.max(bodyScrollHeight, bodyOffsetHeight);
console.log(documentHeight);

補足

• 上記の方法は、DOM が完全に読み込まれた後に実行する必要があります。
• ページに固定要素がある場合は、その高さも考慮する必要があります。
• 高精度な測定が必要な場合は、より高度な方法を使用する必要がある場合があります。

// documentElement.scrollHeight を使用する

function getDocumentHeight1() {
  return document.documentElement.scrollHeight;
}

// body.scrollHeight と body.offsetHeight を組み合わせて使用する

function getDocumentHeight2() {
  const bodyScrollHeight = document.body.scrollHeight;
  const bodyOffsetHeight = document.body.offsetHeight;
  return Math.max(bodyScrollHeight, bodyOffsetHeight);
}

// 使用例

const documentHeight1 = getDocumentHeight1();
console.log('documentElement.scrollHeight:', documentHeight1);

const documentHeight2 = getDocumentHeight2();
console.log('body.scrollHeight + body.offsetHeight:', documentHeight2);

このコードを実行すると、以下のような出力が得られます。

documentElement.scrollHeight: 800
body.scrollHeight + body.offsetHeight: 800

上記のコードはあくまでも一例です。状況に応じて、必要に応じて修正する必要があります。

以下のコードは、固定要素の高さを考慮したドキュメント全体の高さの取得方法を示しています。

function getDocumentHeightWithFixedElements() {
  const body = document.body;
  const html = document.documentElement;
  return Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );
}

// 使用例

const documentHeight = getDocumentHeightWithFixedElements();
console.log('ドキュメント全体の高さ (固定要素を含む):', documentHeight);

このコードは、body.scrollHeight、body.offsetHeight、documentElement.clientHeight、documentElement.scrollHeight、documentElement.offsetHeight の値を比較し、最も大きい値をドキュメント全体の高さとして返します。

JavaScript でドキュメント全体の高さを取得するには、さまざまな方法があります。上記のコード例を参考に、状況に合った方法を選択してください。

JavaScript でドキュメント全体の高さを取得するその他の方法

getComputedStyle() メソッドを使用する

この方法は、要素のスタイルプロパティを取得するために使用できます。ドキュメント全体の高さには、body 要素の height プロパティを使用します。

const bodyHeight = getComputedStyle(document.body).height;
console.log(bodyHeight);

getBoundingClientRect() メソッドを使用する

この方法は、要素の境界ボックスの位置と寸法を取得するために使用できます。ドキュメント全体の高さには、documentElement 要素の getBoundingClientRect() メソッドの height プロパティを使用します。

const documentHeight = document.documentElement.getBoundingClientRect().height;
console.log(documentHeight);

ライブラリを使用する

jQuery や lodash などのライブラリには、ドキュメント全体の高さを取得するためのユーティリティ関数を提供している場合があります。

例：jQuery

const documentHeight = $(document).height();
console.log(documentHeight);

例：lodash

const documentHeight = _.max([document.body.scrollHeight, document.documentElement.scrollHeight]);
console.log(documentHeight);

それぞれの方法の比較

どの方法を選択するかは、状況によって異なります。シンプルな方法が必要であれば、documentElement.scrollHeight を使用するのが良いでしょう。より正確な高さを必要とする場合は、body.scrollHeight と body.offsetHeight を組み合わせて使用する必要があります。ライブラリを使用する方法は、コードを簡潔にすることができますが、ライブラリの読み込みが必要になります。