计算浏览器垂直滚动条的宽度代码实例

快乐打工仔发布于 9个月前分类：实例代码

通常是没有获取滚动条宽度的需求，但是这里纯粹为了学习javascript知识。

下面就通过代码实例介绍一下如何实现此功能，代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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中输出滚动条的宽度，代码非常的简单，更多内容可以参阅从相关阅读。