スクロール可能な要素の高さの取得と計算:clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopの区別

要素の高さの取得

一、基礎：clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTopの区別を整理する

図が表示されます.https://blog.csdn.net/qq_35430000/article/details/80277587非常に詳しく説明していますが、こちらのリストは以下のようにまとめられています.
名前
範囲
clientHeight
content高さ(上下paddingを含む)
offsetHeight
content高さ+上下border
scrollHeight
要素がスクロール可能な場合、contentの実際の高さ;従ってscrollHeight恒>=offsetHeight
offsetTop
スクロールバーがある場合、スクロールバーが下にスクロールする距離、すなわち要素の上部が隠されている部分の高さ、スクロールバーがない場合は0
scrollTop
現在のエレメントの上部は、スクロールバーの有無に関係なく、最も近い親エレメントの上部からの距離です.

margin値を取得するにはどうすればいいですか?

// ele       dom  
const marginBt = parseFloat(window.getComputedStyle(ele).marginBottom)

二、スクロール要素の高さを取得する

(vueを例に)

<div $ref="listheight">
......
</div>

const listheight = this.$refs.listheight.scrollHeight

三、指定されたサブエレメントの高さを手動で計算する

let chil = this.$refs.listheight.children;
  //   for           ，        offsetHeight  marginBottom 
  let calculateHeight = 0;
  for(var i = chil.length - 1; i >= 0; i--) {
     
    calculateHeight += chil[i].offsetHeight + parseFloat(window.getComputedStyle(chil[i]).marginBottom);
  }

参照先:https://blog.csdn.net/qq_35430000/article/details/80277587