js利用offsetWidth和clientWidth来计算滚动条的宽度

本文主要是介绍js利用offsetWidth和clientWidth来计算滚动条的宽度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

大家好，清明节即将来来临，清明时节雨纷纷，路上行人欲断魂，借问酒家何处有，牧童遥指杏花村！！哈哈哈哈!言归正传，今天我主要介绍一个计算滚动条宽度的例子。

前言

其实，很多情况下滚动条宽度是不用计算的，特别是谷歌浏览器，可以对滚动条进行美化，具体请看CSS选中状态修改，谷歌滚动轴修改这里例子，已经定义了滚动条的宽度是9px加上padding-left的一个像素，所以滚动条的宽度应该是10px,但是，这样计算出来有浏览器兼容问题，你的IE浏览器的滚动条宽度不一定是10px，今天，我用offsetWidth和clientWidth来计算一下滚动条的宽度。

占位方式

在PC浏览器中，滚动条是占位元素的内边距和内容区域的；而在移动浏览器中，滚动条是不占用内边距和内容区域，并且还及时显隐。因此，只需要在在PC浏览器中计算滚动条的宽度，尤其是在全屏弹窗不可滚动的情况中。

offsetWidth-clientWidth方法

说到offsetWidth和clientWidth，不少朋友迷茫了，这个宽度是什么意思呢？jquery的height()和javascript的height总结，js获取屏幕高度这篇文章洪有关javascript的各种高度，介绍了offsetWidth和clientWidth等等的意思，大家可以看看！！

function getScrollbarWidth() {var oP = document.createElement('p'),styles = {width: '100px',height: '100px',overflowY: 'scroll'}, i, scrollbarWidth;for (i in styles) oP.style[i] = styles[i];document.body.appendChild(oP);scrollbarWidth = oP.offsetWidth - oP.clientWidth;oP.remove();return scrollbarWidth;
}

使用

console.dir(getScrollbarWidth());

就可以输出滚动条的宽度了，大家可以试一试啊！

clientWidth-clientWidth方法

这个方法和上面的方法差不多！

function getScrollbarWidth() {var oP = document.createElement('p'),styles = {width: '100px',height: '100px'}, i, clientWidth1, clientWidth2, scrollbarWidth;for (i in styles) oP.style[i] = styles[i];document.body.appendChild(oP);clientWidth1 = oP.clientWidth;oP.style.overflowY = 'scroll';clientWidth2 = oP.clientWidth;scrollbarWidth = clientWidth1 - clientWidth2;oP.remove();return scrollbarWidth;
}

使用方法一样！