精确地计算Web页面中滚动条的宽度

实际上对于HTML里面的容器元素，它们的长、宽之间存在这样的运算关系：

    width = border-left-width +

clientWidth + border-right-width;

    height = border-top-width +

clientHeight + border-bottom-width;

但是当容器内出现滚动条后，这个长、宽运算关系将变为：

    width = border-left-width + clientWidth +

scrollbar-width + border-right-width;

    height =

border-top-width + clientHeight + scrollbar-width

+ border-bottom-width;

    下面是一个DIV的示例：style="margin: 25px; padding:

25px; width: 200px; height: 200px; border: solid 25px blue; background-color:

yellow; overflow: scroll;"。

X

DIV: clientWidth: 130

    DIV: offsetWidth:

200

    上面示例中的scrollbar-width为：offsetWidth - borderLeftWidth -

borderRightWidth - clientWidth = 200px - 25px - 25px - 130px = 20px。

本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。