计算浏览器垂直滚动条的宽度代码实例
分类：实例代码
通常是没有获取滚动条宽度的需求，但是这里纯粹为了学习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一章节。
