JS学习40：计算滚动条的宽度
在计算滚动条之前，说明下滚动条的占位⽅式。在PC浏览器中，滚动条是占位元素的内边距和内容区域的；⽽在移动浏览器中，滚动条是不占⽤内边距和内容区域，并且还及时显隐。因此，只需要在在PC浏览器中计算滚动条的宽度，尤其是在全屏弹窗不可滚动的情况中。
详细⽅法如下（offsetWidth-clientWidth）：
function getScrollbarWidth(){
var oP = ateElement('p'),
styles ={
width:'100px',
height:'100px',
overflowY:'scroll'
js控制滚动条}, i, scrollbarWidth;
for(i in styles) oP.style[i]= styles[i];
document.body.appendChild(oP);
scrollbarWidth = oP.offsetWidth - oP.clientWidth;
return scrollbarWidth;
}
关于offsetWidth和clientWidth更多知识参考。
⽅法2（clientWidth-clientWidth）：
function getScrollbarWidth(){
var oP = ateElement('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;
return scrollbarWidth;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。