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

DIV: clientWidth: 130
DIV: offsetWidth: 200

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

转载于:https://www.cnblogs.com/birdshome/archive/2005/07/02/184928.html

精确地计算Web页面中滚动条的宽度相关推荐

html右键禁用和web页面中添加加入qq群的方式
需求: html禁用右键,防止定位csspath和xpath,同时需要在web页面中加入添加加入qq群的图标实现: html禁用右键:利用oncontextmenu <!doctype htm ...
从此不再为Web页面中的Tooltip烦恼
让Web页面中,不能折行或不希望被折行的文字始终显示在一行,是一种严格的UI风格,毕竟自由的折行会使得表格和整体界面变得很难把握.当然在一行显示不完全时配以省略号在结尾,能很好的提示用户表示语句未结束 ...
php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
[置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
在html页面中怎么打印区域,javascript打印web页面中指定区域的方法
要实现打印web页面中的指定区域,要做到: 将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容. 核心代码: 复制代码代码示例: ...
轻松实现在web页面中直接播放rtsp视频流
轻松实现在web页面中直接播放rtsp视频流写在前面实现介绍如何使用准备ffmpeg 运行rtsp2web 参数说明(在 `new RTSP2web` 时,可配置的参数如下): 前端代码参 ...
获取整个页面包括滚动条的宽度，获取滚动条宽度
更正!!!!!!!! 下面的代码没用了, 今天看到了 window.outerWidth 这个属性,直接就能取到整个页面包括滚动条的宽度:评论说 window.innerWidth 才是对的, 刚刚 ...
php面积计算html代码,计算PHP页面中的所有HTML标记
我花时间在正则表达式来解决这个问题,但没有结果我尝试使用PHP 5.3解决这个问题信息类似 – 页面中重复的次数和页面中所有标签的信息. 解决方法: 遗憾的是,你的问题在目前的形式中几乎无法理解. ...
VS2008 Tips #008 如何创建ASP.NET Web 用户控件并包含在Web 页面中
在 Visual Web Developer 中创建 ASP.NET Web 用户控件就像 ASP.NET Page 页面一样简单. 以下是创建步骤: 1.打开您想添加用户控件的站点. 2.右键点击站 ...

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

精确地计算Web页面中滚动条的宽度相关推荐

最新文章

热门文章