More than 1 year has passed since last update.

JSのscrollHeight, clientHeight, offsetHeightの違い

Last updated at 2022-07-13Posted at 2022-03-27

駆け出しプログラマーの備忘録です。

JSでページの高さを調べるためには様々種類の要素を使用できるかと思いますが、それぞれどのような違いがあるのか、忘れないようにメモしておきます。

例えば、SNSでは特に使用されている、Infinity Scroll（スクロールするたびに新しいコンテンツが読み込まれるもの）などを作るときに使用しますね。

scrollHeight

scrollHeightは、要素のコンテンツの高さ（overflowによってスクリーン上では見れなくなっているコンテンツを含む）

また、要素のpaddingは含みますが、border, margin, 縦方向のスクロールバーは含みません。
高さの疑似要素(::before, ::afterなど）は含みます。

要素のコンテンツが縦のスクロールバーなしに、　収まっている場合、scrollHeightはclientHeightと同じになります。

clientHeightは要素のCSSやインラインのレイアウトがない場合は、０として返されます。それ以外の場合は、ボックスの中の高さがピクセル単位で返されます。要するに、paddingは含まれますが、border, margin, 縦のスクロールバーは含まれません。

offsetHeightは要素の高さ（縦のpaddingとborderを含む）を整数として返します。基本的には要素のCSSの高さによってピクセル単位で計られます。

高さは、border, padding, 縦のスクロールバーが含まれますが、疑似要素(::before, ::afterなど）の高さは含まれません。

もし、要素がhiddenとして隠されていた場合は、高さは0として返されます。