HTML DOM Element scrollHeight属性

定義と使用法

scrollHeight 属性は要素の高さをピクセル単位で返します。内余白を含み、ボーダーやスクロールバー、外余白を除きます。

scrollHeight 属性は読み取り専用です。

注記：scrollWidth および scrollHeight どちらも要素の全体の高さと幅を返します（オーバーフローによる不可視部分を含む）。

参照：

scrollWidth属性

CSS overflow プロパティ

例

例 1

要素の高さと幅を取得します（内余白を含む）：

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

自分で試してみてください

例 2

padding、border、scrollbarがscrollWidthとscrollHeightにどのように影響するか：

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

自分で試してみてください

例 3

scrollHeight と scrollWidth から返される値で要素の高さと幅を設定します：

element.style.height = element.scrollHeight + "px";
element.style.width = element.scrollWidth + "px";

自分で試してみてください

文法

element.scrollHeight

返り値

タイプ 説明
数字 ピクセル単位で要素の高さです。

ブラウザのサポート

すべてのブラウザがサポートしています element.scrollHeight：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート