[普通]精确地计算Web页面中滚动条的宽度

作者(passion) 阅读(1031次) 评论(0) 分类( html)

原来我一直以为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;"。

    

blob.png


    DIV: clientWidth: 130
    DIV: offsetWidth: 200

    上面示例中的scrollbar-width为:offsetWidth - borderLeftWidth - borderRightWidth - clientWidth = 200px - 25px - 25px - 130px = 20px。


« 上一篇:wifi共享上网(至尊版wifi)
« 下一篇:ASP.NET附加数据库文件的方式,如何发布到IIS7而不导致SQLServer出错
在这里写下您精彩的评论
  • 微信

  • QQ

  • 支付宝

返回首页
返回首页 img
返回顶部~
返回顶部 img