电竞比分网-中国电竞赛事及体育赛事平台

分享

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

 duduwolf 2005-11-13
    原來我一直以為Web頁面中的滾動條寬度是不能精確確定的,因為用戶自己可以在桌面屬性中設(shè)置系統(tǒng)滾動條的寬度為任意整數(shù)。再加之上次在MyMsn的代碼里看見M$程序員的注釋,更加讓我認(rèn)為滾動條的寬度是不能精確計算地。但事實(shí)是怎么樣的呢?

    實(shí)際上對于HTML里面的容器元素,它們的長、寬之間存在這樣的運(yùn)算關(guān)系:
    width = border-left-width + clientWidth + border-right-width;
    height = border-top-width + clientHeight + border-bottom-width;

    但是當(dāng)容器內(nèi)出現(xiàn)滾動條后,這個長、寬運(yùn)算關(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;

    下面是一個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

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多