【JavaScript】scrollHeight、clientHeight、offsetHeightの違い

基本的な違い

プロパティ	測定内容	含まれるもの
scrollHeight	スクロール可能な全コンテンツ高さ	パディング + 全コンテンツ（非表示部分含む）
clientHeight	表示可能領域の高さ	パディング（ボーダー・スクロールバー除く）
offsetHeight	要素の実際の高さ	パディング + ボーダー + スクロールバー

計算式

// 基本的な取得方法
const element = document.getElementById('target');

console.log(element.scrollHeight);  // 全コンテンツ高さ
console.log(element.clientHeight);  // 表示領域高さ  
console.log(element.offsetHeight);  // 実際の要素高さ

例

スクロール判定（scrollHeight）

// スクロールが最下部に到達したかを判定
function isScrolledToBottom(element) {
  return Math.abs(
    element.scrollHeight - element.clientHeight - element.scrollTop
  ) <= 1;
}

オーバーフロー検出

// コンテンツがオーバーフローしているかチェック
function isOverflowing(element) {
  return element.scrollHeight > element.clientHeight;
}

レイアウト計算（offsetHeight）

// 要素の実際のサイズを考慮した配置
function positionBelow(targetElement, referenceElement) {
  const top = referenceElement.offsetTop + referenceElement.offsetHeight;
  targetElement.style.top = top + 'px';
}

参考