精确地計算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/，如需轉載請自行聯系原部落客。