jsの高低差と頂点の比較_基礎知識

js で clientHeight(clientTop)、offsetHeight(offsetTop)、scrollHeight(scrollTop) を見るたびに混乱してしまい、それらの違いがわかりません。しかし、これらを一度や二度遭遇する価値はありません。どちらを使用するかを決定するには、毎回違いを確認する必要があります。

この記事は主に Chrome に基づいています。さまざまなブラウザ間でいくつかの違いがある可能性がありますが、その多くは私が遭遇したことがないため、今後同様の互換性の問題が発生したときに記録します。ここで、今回は、今後の閲覧を容易にするために、Chrome ブラウザーのさまざまなプロパティの違いを記録します

clientHeight、offsetHeight、scrollHeight の違い

ClientHeight は基本的にさまざまなブラウザで同じであり、コンテンツの表示領域の高さ、つまりページ ブラウザ内でコンテンツが表示される領域の高さを意味します。ただし、スクロール バーとマージンは含まれません。つまり、実際の clientHeight = 現在のオブジェクトの表示領域の高さのパディング値 (下の図に示すように) clientHeight = オブジェクトの表示領域の高さ (300)より低いパディング値 (20) = 320

さまざまなブラウザで実用的な Javascript ソリューション:

var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;

OffsetHeight = 現在のオブジェクトのスクロール バーの高さ、ボーダー値、パディング値。上の図の現在のオブジェクトの高さは、ビジュアル領域の高さと同じであるため、offsetHeight = 300 padding(20px) border(10px) = 330

ScrollHeight は Web ページのコンテンツの実際の高さです。最小値は clientHeight です。ただし、次のコードに示すように、親 div の高さと同じであると仮定します。は300px、子divの高さは500pxです。このとき、親divの構造図は以下のようになります。

<div id="parent" style="padding:10px;border:5px red solid;height:300px;width:200px;overflow:auto">
  <div style="height:500px;width:400px"></div>
</div>

clientTop、offsetTop、scrollTop の違い