精確地計算Web頁面中滾動條的寬度

原來我一直以為Web頁面中的滾動條寬度是不能精確確定的，因為用戶自己可以在桌面屬性中設置系統滾動條的寬度為任意整數。再加之上次在MyMsn的代碼里看見M$程序員的注釋，更加讓我認為滾動條的寬度是不能精確計算地。但事實是怎麼樣的呢？ 實際上對於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。
推薦閱讀：