JavaScript scrollHeight

admin發表於2019-01-03
JavaScript

scrollHeight 屬性返回指定元素的內容高度，只讀屬性，返回值是一個數字（不帶任何單位，預設以畫素計）。

此屬性對內容高度進行四捨五入取整，如需精確值，推薦 getBoundingClientRect() 方法。

掌握此屬性關鍵在於理解什麼是 "內容高度"，後續通過程式碼詳細分析。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let num = dom.scrollHeight;

內容高度圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/24/235944fzd4jh04b0j34xc0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示簡單分析如下：

（1）.元素的高度並不能完全表達其"內容高度"。

（2）.因為，內容的高度可能會更大，如上圖藍色內容，高度大於其容器。

上面進行了粗略的概述，以便對內容高度有一個總體把握，下面通過程式碼例項演示細節。

瀏覽器支援：

（1）.IE 瀏覽器支援此屬性。

（2）.edge 瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera 瀏覽器支援此屬性。

（6）.safari 瀏覽器支援此屬性。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width :100px;
  height :40px;
  line-height :40px;
  margin :5px;
  padding :10px;
  border :2px dotted #ccc;
  text-align :center;
  font-size: 12px;
  color:green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  let num = oDiv.scrollHeight;
  oDiv.innerHTML = num;
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/25/110557zw6psbskksp3zhpu.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼分析如下：

（1）.垂直方位沒有出現滾動條，那麼 scrollHeight 與 clientHeight 相同。

（2）.60 = 40（height）+ 10（padding-top）+ 10（padding-bottom）。

（3）.也就是 ，scrollHeight 屬性值等於元素 height 高度加上下內邊距。

關於 clientHeight 屬性可以參閱 JavaScript clientHeight一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  border:2px dotted #ccc;
  text-align:center;
}
#ant {
  width:120px;
  height:60px;
  margin:5px;
  padding:10px;
  overflow:auto;
}
#inner{
  width:50px;
  height:200px;
  margin:5px;
}
#show{
  width: 145px;
  color:green;
  font-size: 12px;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  let oshow=document.getElementById("show");
  let num = oDiv.scrollHeight;
  oshow.innerHTML = num;
}
</script>
</head>
<body>
  <div id="ant">
    <div id="inner"></div>
  </div>
  <div id="show"></div>
</body>
</html>

上述程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/25/000111bjxj4duzblhi3xlj.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面進行一下分析：

（1）."內容高度" 較大，所以父元素出現垂直滾動條。

（2）."內容高度" 等於元素在不出現垂直滾動條情況下，恰好容納其內部所有內容所需要的視口高度。

（3）.所以上述 "視口高度" = ant.padding（10+10）+ inner.height（200）+ inner.borderWidth（2+2）+ inner.margin（5+5）= 234。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  border :2px dotted #ccc;
  text-align :center;
}
#ant {
  width :125px;
  height :214px;
  padding :10px;
  margin-bottom :5px;
  overflow :auto;
}
#inner {
  width :50px;
  height :200px;
  margin :5px;
}
#show {
  width :145px;
  color :green;
  font-size :12px;
}
</style>
<script>
window.onload = ()=> {
  let oDiv = document.getElementById("ant");
  let oshow = document.getElementById("show");
  let num = oDiv.scrollHeight;
  oshow.innerHTML = num;
}
</script>
</head>
<body>
  <div id="ant">
    <div id="inner"></div>
  </div>
  <div id="show"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/25/000156kg86486xugm48xxu.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼說明如下：

（1）.此程式碼僅調整了 ant 元素的高度。

（2）.高度調整到214px，這是不出現滾動條的臨界值。

（3）.ant 元素的視口高度（clientHeight）就是 scrollHeight 高度值，以此證明 "內容高度等於元素在不出現垂直滾動條情況下，恰好容納其內部所有內容所需要的視口高度" 結論的正確性。

相關文章