JavaScript scrollWidth

admin發表於2018-11-18
JavaScript

scrollWidth屬性可以返回元素的內容寬度，返回一個數值（單位是畫素）。

現在關鍵問題出現了，那就是這個"內容寬度"指的元素的哪一部分。

對於width屬性，大家都很熟悉，它可以返回元素的寬度。

但是元素可能會出現滾動條，有些尺寸會被遮擋。

效果演示截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/18/161321ea144te1p1b1was4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到，元素出現scroll水平滾動條，說明有一部分寬度在不可視範圍內。

scrollWidth屬性用於獲取的寬度，包括不可見範圍內的寬度。

與scrollWidth相對應的是scrollHeight屬性。

只讀屬性，不能賦值。

語法結構：

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

瀏覽器支援:

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

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

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

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

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

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

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant {
  width:100px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
}
</style>
<script>
window.onload = function () {
  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/201811/18/161407ngspol9a1gxo1sza.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.120是scrollWidth屬性返回值。

（2）.scrollWidth包含左右內邊距的尺寸。

（3）.scrollWidth屬性值不包括左右邊框尺寸，但是包括左右內邊距尺寸。

（4）.div元素沒有出現水平滾動條，此時scrollWidth屬性值與clientWidth屬性值相同。

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

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant {
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
  overflow:auto;
}
#inner{
  width:180px;
  height:10px;
}
</style>
<script>
window.onload = function () {
  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/201811/18/161442iplyf5pl1yqal30i.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.外層div元素出現滾動條，那麼它的內容寬度大於width+padding。

（2）.這時scrollWidth屬性值等於子元素寬度加上它padding-left值，需要特別注意，從上面圖示也可以看出，只有左內邊距寬度會被計算在內，右內邊距不會對scrollWidth寬度產生影響，同時設定左右外邊距時，左外邊距優先順序高。

（3）.190 = 180（width） + 10 （padding-left）.

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant {
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
  overflow:auto;
}
#inner{
  width:100px;
  height:100px;
  background-color:green;
}
</style>
<script>
window.onload = function () {
  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/201811/18/161514mpxkcdu6yfmptmfd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.scrollWidth不包含垂直滾動條（如果有的話）的寬度。

（2）.谷歌瀏覽器滾動條的寬度是17px，也許以後會變，也許根據瀏覽器型別不同而不同，實測為準。

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

（4）.如果出現水平滾動條，與paddng-right一樣，滾動條寬度不會對scrollWidth寬度產生影響，不再演示。

相關文章