計算瀏覽器垂直滾動條的寬度程式碼例項

antzone發表於2017-04-11
瀏覽器

通常是沒有獲取滾動條寬度的需求，但是這裡純粹為了學習javascript知識。

下面就通過程式碼例項介紹一下如何實現此功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function getScrollbarWidth() {
  var oP = document.createElement('p'),
      styles = {
        width: '100px',
        height: '100px',
        overflowY: 'scroll'
      },
      prop,
      scrollbarWidth;
  for (prop in styles)
    oP.style[prop] = styles[prop];
  document.body.appendChild(oP);
  scrollbarWidth = oP.offsetWidth - oP.clientWidth;
  return scrollbarWidth;
}
window.onload = function () {
  var odiv = document.getElementById("antzone");
  odiv.innerHTML = getScrollbarWidth();
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼可以在div中輸出滾動條的寬度，程式碼非常的簡單，更多內容可以參閱從相關閱讀。

相關閱讀:

（1）.document.createElement()可以參閱document.createElement()一章節。

（2）.for in語句可以參閱js for in語句一章節。

（3）.appendChild()方法可以參閱appendChild()一章節。

（4）.offsetWidth可以參閱js offsetWidth一章節。

（5）.clientWidth可以參閱clientWidth一章節。

（6）.innerHTML 可以參閱innerHTML一章節。

相關文章