思路：通过创建一个元素，不要给元素设置边框，然后给元素设置overflowY:scroll，再根据元素的offsetWidth-clientWidth来计算滚动条宽度。
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>计算滚动条宽度</title></head><body><script>// 封装获取滚动条宽度的方法function getScrollBarWidth() {var el = document.createElement("p"),styles = {width: "100px",height: "100px",overflowY: "scroll"},i;// 这里很巧妙呀，先定义了一个styles对象，里面写了各种样式值，然后通过for in将这个对象的值赋给p元素的style对象// 而不用通过style.width=***等来给p的样式对象赋值。for (i in styles) {el.style[i] = styles[i];}// 将元素加到body里面document.body.appendChild(el);var scrollBarWidth = el.offsetWidth - el.clientWidth;//将添加的元素删除el.remove();return scrollBarWidth;}console.log(getScrollBarWidth()); // 注意这里imac得到的结果为0，因为imac的滚动条是没有宽度的。</script></body></html>
![dom元素滚动条高度 js_javascript 获取滚动条高度+常用js页面宽度与高度[转]](https://1200zi.500zi.com/uploadfile/img/15/550/05f24db9a9fa572acb129d35df8ae895.jpg)
