原來(lái)我一直以為Web頁(yè)面中的滾動(dòng)條寬度是不能精確確定的,因為用戶(hù)自己可以在桌面屬性中設置系統滾動(dòng)條的寬度為任意整數。再加之上次在MyMsn的代碼里看見(jiàn)M$程序員的
注釋,更加讓我認為滾動(dòng)條的寬度是不能精確計算地。但事實(shí)是怎么樣的呢?
實(shí)際上對于HTML里面的容器元素,它們的長(cháng)、寬之間存在這樣的運算關(guān)系:
width = border-left-width + clientWidth + border-right-width;
height = border-top-width + clientHeight + border-bottom-width;
但是當容器內出現滾動(dòng)條后,這個(gè)長(cháng)、寬運算關(guān)系將變?yōu)椋?br> width = border-left-width + clientWidth +
scrollbar-width + border-right-width;
height = border-top-width + clientHeight +
scrollbar-width + border-bottom-width;
下面是一個(gè)DIV的示例:
style="margin: 25px; padding: 25px; width: 200px; height: 200px; border: solid 25px blue; background-color: yellow; overflow: scroll;"。
DIV: clientWidth: 130
DIV: offsetWidth: 200
上面示例中的scrollbar-width為:offsetWidth - borderLeftWidth - borderRightWidth - clientWidth = 200px - 25px - 25px - 130px =
20px。
本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請
點(diǎn)擊舉報。