JavaScript scrollWidth

admin發表於2018-11-18
JavaScript

scrollWidth 屬性返回指定元素的內容寬度，只讀屬性，返回值是一個數字（預設以畫素計）。

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

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

語法結構：

[JavaScript] 純文字檢視 複製程式碼
dom.scrollWidth

內容寬度圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/25/205637lrzeqgnc39vw3n3c.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 :60px;
  line-height :60px;
  margin :5px;
  padding :10px;
  border :5px solid #ccc;
  text-align :center;
  font-size :12px;
  color :green;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  let num = oDiv.scrollWidth;
  oDiv.innerHTML = num;
}
</script>
</head>
<body>
  <div id="ant"></div>
</body>
</html>

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

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

對上述程式碼分析如下：

（1）.水平方位沒有出現滾動條，那麼 scrollWidth 與 clientWidth 相同。

（2）.120 = 100（width）+ 10（padding-left）+ 10（padding-right）。

（3）.也就是 ，scrollWidth 屬性值等於元素 width 寬度加左右內邊距。

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

[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 :150px;
  height :60px;
  margin-bottom :5px;
  padding :10px;
  overflow :auto;
}
#inner {
  width :300px;
  height :30px;
  margin:5px;
}
#show {
  width: 170px;
  color:green;
  font-size: 12px;
}
</style>
<script>
window.onload = ()=> {
  let oDiv = document.getElementById("ant");
  let oShow = document.getElementById("show");
  let num = oDiv.scrollWidth;
  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/205742l7mgrrrj7gphpzu7.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面進行一下分析：

（1）."內容寬度" 較大，所以父元素出現水平滾動條。

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

（3）.ant.padding-left(10) + inner.width(300) + inner.borderWidth(2+2) + inner.margin-left(5) =319 。

強調：預設，父塊級元素空間不足的情況下，子塊級元素的右外邊距和父元素的右內邊距會失效，首先滿足左邊。

[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 :299px;
  height :60px;
  margin-bottom :5px;
  padding :10px;
  overflow :auto;
}
#inner {
  width :300px;
  height :30px;
  margin:5px;
}
#show {
  width: 319px;
  color:green;
  font-size: 12px;
}
</style>
<script>
window.onload = ()=> {
  let oDiv = document.getElementById("ant");
  let oShow = document.getElementById("show");
  let num = oDiv.scrollWidth;
  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/205818jbxu29b3xr3f93gz.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

前面提到過，"內容寬度" 等於元素在不出現水平滾動條情況下，恰好容納其內部所有內容所需要的視口寬度。

ant.padding-left(10) + inner.margin-left(5) + inner.width(300) + inner.borderWidth(2+2) =319。

這個319就是視口寬度臨界值，如果減少，則會出現水平滾動條。

[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;}
#ant {
  width: 120px;
  height: 60px;
  margin: 5px;
  padding: 10px;
  overflow: auto;
}
#inner {
  width: 100px;
  height: 100px;
}
#show {
  width: 145px;
  color:green;
  font-size: 12px;
  text-align: center;
}
</style>
<script>
window.onload = ()=> {
  let oDiv=document.getElementById("ant");
  let oShow=document.getElementById("show");
  let num = oDiv.scrollWidth;
  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/205844flz7nn7fvn19iphf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.scrollWidth 不包含垂直滾動條寬度。

（2）.當前谷歌滾動條寬度是 17px，各瀏覽器滾動條寬度以實測為準。

（3）.123 = 120（width）+ 10（padding-left）+ 10（padding-right）- 17。

相關文章