精确地计算Web页面中滚动条的宽度

最新推荐文章于 2022-05-27 11:03:10 发布

weixin_33704234

最新推荐文章于 2022-05-27 11:03:10 发布

阅读量342

点赞数

原文链接：https://yq.aliyun.com/articles/332593

版权

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

    DIV: clientWidth: 130
    DIV: offsetWidth: 200

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

本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。