JS学习40：计算滚动条的宽度

本是古典何须时尚 2022-07-15 11:14 143阅读 0赞

http://qianduanblog.com/post/js-learning-40-get-scrollbar-width.html

昨天在于江水的博客里看到说弹窗的相关文章（详见：[http://yujiangshui.com/review-how-to-make-popup-mask-effect/][http_yujiangshui.com_review-how-to-make-popup-mask-effect]），里面提到了滚动条的宽度计算，其实滚动条的宽度不难计算，而且非常的简单。

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

详细方法如下（`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; }

关于`offsetWidth`和`clientWidth`更多知识参考[JS学习13：screen/client/offset/scroll/inner/avail的width/left][JS_13_screen_client_offset_scroll_inner_avail_width_left]。

方法2（`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; }

[http_yujiangshui.com_review-how-to-make-popup-mask-effect]: http://yujiangshui.com/review-how-to-make-popup-mask-effect/
[JS_13_screen_client_offset_scroll_inner_avail_width_left]: http://qianduanblog.com/post/js-learning-13-screen-client-offset-scroll-inner-avail-width-left.html