<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何获取滚动轴的宽度</title>
</head>
<body>
</body>
<script>
function getScrollBar() {
var el = document.createElement('p'),
styles={
width:'100px',
height:'100px',
overflowY : "scroll"
},i;
for(i in styles){
el.style[i] = styles[i];
}
document.body.appendChild(el);
console.log(el);
var scrollBarWidth = el.offsetWidth - el.clientWidth;
el.remove();
return scrollBarWidth;
}
console.log(getScrollBar()); //getScrollBar()返回的就是浏览器的导航条宽度
</script>
</html>
Paste_Image.png
这个思想就是，首先在body下创建一个元素，并让它显示滚动条，通过这个元素的offsetWidth和clientWidth的差值来获取这个浏览器的滚动条宽度。
可以看到，clientWidth是获取元素的可视宽度，并不包括滚动条，其实也可以通过获取出现滚动条之前元素的clientWidth和出现滚动条之后元素的clientWidth的值，进行相减，得出滚动条的值。
网友评论