精确地计算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

posted on 2005-07-02 00:53  birdshome  阅读(...)  评论(...编辑  收藏

导航