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

快乐打工仔 分类:实例代码

通常是没有获取滚动条宽度的需求,但是这里纯粹为了学习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中输出滚动条的宽度,代码非常的简单,更多内容可以参阅从相关阅读。

相关阅读:

(1).document.createElement()可以参阅document.createElement()一章节。

(2).for in语句可以参阅js for in语句一章节。

(3).appendChild()方法可以参阅appendChild()一章节。

(4).offsetWidth可以参阅js offsetWidth一章节。

(5).clientWidth可以参阅clientWidth一章节。

(6).innerHTML 可以参阅innerHTML一章节。

回复

我来回复
  • 暂无回复内容