1、网络上流传的图片

2、稍微容易理解点的示意图

参考链接：http://blog.csdn.net/lidiansheng/article/details/7950751

3、言简意赅的示意图

4、最完善的一张图！！！

5、文字总结

1. 基本概念

offsetWidth/offsetHeight

对象的可见宽度

clientWidth/clientHeight

内容的可见宽度

scrollWidth/scrollHeight

元素完整的高度和宽度，overflow:hidden的部分也计算在内。

offsetLeft/offsetTop

当前元素距浏览器边界的偏移量，以像素为单位。

clientTop/clientLeft

这个属性测试下来的结果就是border。

scrollLeft/scrollTop

设置或返回已经滚动到元素的左边界或上边界的像素数。

2. 推断计算

等式①：内容宽度clientWidth=元素宽度elementWidth+内边距padding-滚动条的宽度(如果有滚动条)（不考虑边界border）

比如下方例子中：clientWidth=300+20-17=303

等式②：可见宽度offsetWidth=元素宽度elementWidth+内边距padding+边界border（滚动条包含在边界内部了，没有产生额外距离，不用计算）

比如下方例子中：offsetWidth=300+20+16=336

3.xxxTop区别

等式③：clientTop=border-top属性值（‘-’不是减号，是连字符）

等式④：offsetTop=元素距上边界高度+margin

比如下方例子中：offsetTop=150+15=165

scrollTop：元素的滚动值（可用来做滚动效果）

4、采用scrollTop做滚动效果

 <html>

 <head>

     <title>测试滚动效果</title>

     <meta charset="utf-8">

     <style type="text/css">

         #viewBox

         {

             width: 500px;

             overflow: hidden;

             border: 1px solid pink;

         }

         #scrollBox

         {

             float: left;

             width: 2500px; /*必须足够大才能放下所有滚动内容*/

         }

         #A1, #A2, ul li

         {

             float: left;

             list-style: none;

         }

     </style>

     <script type="text/javascript">

         var viewBox, As1, As2, Atimer;

         function init() {

             viewBox = getid("viewBox");

             As1 = getid("A1");

             As2 = getid("A2");

             As2.innerHTML = As1.innerHTML; //复制一份相同的放在ul后面做衔接

             Atimer = setInterval(Amar, 20);

         }

         function Amar() {

             if (As1.offsetWidth <= viewBox.scrollLeft) {

                 viewBox.scrollLeft -= As1.offsetWidth;

             } else {

                 viewBox.scrollLeft++;

             }

         }

         function getid(id) {

             return document.getElementById(id);

         }

         window.onload = init;

     </script>

 </head>

 <body>

     <div id="viewBox" onmouseover="clearInterval(Atimer)" onmouseout="Atimer=setInterval(Amar,20)">

         <div id="scrollBox">

             <ul id="A1">

                 <li><a href="#">公告1</a></li>

                 <li><a href="#">公告2</a></li>

                 <li><a href="#">公告3</a></li>

             </ul>

             <!-- 用来做无缝衔接 -->

             <ul id="A2"></ul>

         </div>

     </div>

 </body>

 </html>

显示效果：

6、一个小例子

 <html>

 <head>

     <title>测试</title>

     <meta charset="utf-8">

     <style type="text/css">

         *

         {

             margin: 0px;

             padding: 0px;

         }

         #container

         {

             width: 300px;

             height: 200px;

             position: absolute;

             left: 200px;

             top: 150px;

             margin: 15px;

             padding: 10px;

             overflow: auto;

             background-color: #555;

             border: 8px solid green;

         }

             #container p

             {

                 background-color: pink;

                 width: 200px;

                 height: 500px;

             }

     </style>

 </head>

 <body>

     <div id="container">

         <p>

             文字内容

         </p>

     </div>

     <script type="text/javascript">

         /*在Chrome或Firefox下查看输出*/

         console.log('元素内样式属性（不指定则为空）style.top →→→→ ' + container.style.top)

         console.log('元素内样式属性（不指定则为空）style.left →→→→ ' + container.style.left)

         console.log('元素内样式属性（不指定则为空）style.width →→→→ ' + container.style.width)

         console.log('元素内样式属性（不指定则为空）style.height →→→→ ' + container.style.height)

         console.log('可见区域上边框(border属性指定) clientTop →→→→ ' + container.clientTop)

         console.log('可见区域左边框(border属性指定) clientLeft →→→→ ' + container.clientLeft)

         console.log('内容区域宽度（包括padding 20px,不包括滚动条17px，即300+20-17=303） clientWidth →→→→ ' + container.clientWidth)

         console.log('可见区域宽度（包括padding 20px 和border 16px 滚动条在其内部，没有产生额外长度）offsetWidth →→→→ ' + container.offsetWidth)

         console.log('内容区域高度（包括padding 20px） clientHeight →→→→ ' + container.clientHeight)

         console.log('可见区域高度度（包括padding 20px和border 16px 滚动条在其内部，没有产生额外长度） offsetHeight →→→→ ' + container.offsetHeight)

         console.log('与上层或外层偏移（包括margin 15px） offsetTop →→→→ ' + container.offsetTop)

         console.log('与左层或外层偏移（包括margin 15px）  offsetLeft →→→→ ' + container.offsetLeft)

         console.log('已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollTop →→→→ ' + container.scrollTop)

         console.log('已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollLeft →→→→ ' + container.scrollLeft)

         console.log('滚动条最大滚动距离（即隐藏的部分的高度） scrollTopMax →→→→ ' + container.scrollTopMax)

         console.log('滚动对象的完整宽度（至少是元素宽度） scrollWidth →→→→ ' + container.scrollWidth)

         console.log('滚动对象的完整高度（至少是元素高度） scrollHeight →→→→ ' + container.scrollHeight)

         console.log('screen.top →→→→ ' + window.screen.top);

         console.log('screen.left →→→→ ' + window.screen.left);

         console.log('screen.height →→→→ ' + window.screen.height);

         console.log('screen.width →→→→ ' + window.screen.width);

         console.log('screen.availHeight →→→→ ' + window.screen.availHeight);

         console.log('screen.availWidth →→→→ ' + window.screen.availWidth);

     </script>

 </body>

 </html>

界面显示：

后台输出：

 "元素内样式属性（不指定则为空）style.top →→→→ "

 "元素内样式属性（不指定则为空）style.left →→→→ "

 "元素内样式属性（不指定则为空）style.width →→→→ "

 "元素内样式属性（不指定则为空）style.height →→→→ " 

 "可见区域上边框(border属性指定) clientTop →→→→ 8" /*就是border-top宽度*/

 "可见区域左边框(border属性指定) clientLeft →→→→ 8" /*就是border-left宽度*/

 "内容区域宽度（包括padding 20px,不包括滚动条17px，即300+20-17=303） clientWidth →→→→ 303" /*参见等式①*/

 "可见区域宽度（包括padding 20px 和border 16px 滚动条在其内部，没有产生额外长度）offsetWidth →→→→ 336" /*300+20+16=336,参见等式②*/

 "内容区域高度（包括padding 20px） clientHeight →→→→ 220" /*元素200+padding20-滚动条0=220*/

 "可见区域高度度（包括padding 20px和border 16px 滚动条在其内部，没有产生额外长度） offsetHeight →→→→ 236" /*200+20+16=236,类似等式②*/

 "与上层或外层偏移（包括margin 15px） offsetTop →→→→ 165" /*150+15(margin-top),参见等式④*/
12 "与左层或外层偏移（包括margin 15px） offsetLeft →→→→ 215"/*200+15(margin-left),类似等式④*/

 "已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollTop →→→→ 0"

 "已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollLeft →→→→ 0"

 "滚动条最大滚动距离（即隐藏的部分的高度） scrollTopMax →→→→ 290"

 "滚动对象的完整宽度（至少是元素宽度） scrollWidth →→→→ 303"

 "滚动对象的完整高度（至少是元素高度） scrollHeight →→→→ 510"

 "screen.top →→→→ 0"

 "screen.left →→→→ 0"

 "screen.height →→→→ 900"

 "screen.width →→→→ 1600"

 "screen.availHeight →→→→ 860"

 "screen.availWidth →→→→ 1600"

隐藏部分的高度scrollTopMax：

令人头疼的clientTop、scrollTop、offsetTop的更多相关文章

clientTop scrollTop offsetTop
关于top.clientTop.scrollTop.offsetTop的用法网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.cli ...
scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义及计算方式附实例说明
一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...
clientTop、offsetTop和scrollTop的区分
页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...
JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
clientTop,scrollTop，兼容
在开发中常见的额兼容性问题: scrollTop问题: function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { ...
Uncaught TypeError: Cannot read property 'offsetTop' of undefined at VueComponent.handleScroll
mounted() { window.addEventListener("scroll", this.handleScroll); }, beforeDestroy() { win ...
js/jQuery使用过程中常见问题
目录一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...
HTML input小结
一.Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1.type=text 输入类型是text,这是我们 ...
HTML元素坐标定位，这些知识点得掌握
文档坐标和视口坐标视口坐标是相对于窗口的坐标,而文档坐标是相对于整个文档而言.例如,在文档坐标中如果一个元素的相对于文档的Y坐标是200px,并且用户已经把浏览器向下滚动了75px,那么视口坐标中元 ...

随机推荐

Centos搭建PHP5.3.8+Nginx1.0.9+Mysql5.5.17
操作环境操作系统:Mac Os Lion 虚拟主机:VMware Fusion 虚拟系统:Centos 5.5+ 操作用户:Root 实现目的:搭建LNMP环境. 安装依赖库和开发环境 #依赖库和开 ...
IOS- 最简单的反向传值- block
block 常用于反向传值声明返回值类型 (^block)(参数列表) 调用闭包的名字=^(参数列表){}: 闭包的名字(): 如: void(^aaaaa)(int num,NSString ...
WPF FileFolderDialog 和弹出子窗口的一些问题
摘要:本文主要是WPF中 FileFolderDialog的相关问题,补充了关于在父窗口弹出子窗口,以及子窗口的相关属性(Data Binding)和命令绑定(Delegate Command)问题, ...
PHPEXCEL使用实例
最近在项目中要用到PHP生成EXCEL,上网找了一下,发现PHPEXCEL挺不错,用了一下,感觉还行,就是设置单元格格式的时候比较麻烦,总体来说功能还是比较强大的,还有生成PDF什么的,发一个实例吧 ...
C++中const修饰基本数据类型、指针、引用、对象
const修饰基本数据类型 #include <iostream> using namespace std; void main(){ const int a = 1; const cha ...
通过正则表达式获取url中参数
url: http://xxxx.com?name=魅力&id=123 js中: var name = getUrlParam("name"); /*通过正则获取url中的 ...
FBWF和EWF的对比
最近在公司接触了嵌入式的wes7系统,wes7和wes2009是组件化的windows系统,除具有最新版的windows功能之外还具有适用于嵌入式系统的一些嵌入式功能,如例如EWF,FBWF. FBW ...
oracle日期格式数据修改
select * from INVOICE_NEW where ref_no='32308' update INVOICE_NEW set check_d=to_date('2015/11/16', ...
php实现单链表
<?php /** * 单链表 */ class Demo { private $id; public $name; public $next; public function __constr ...
cms开发笔记2
1 创建数据库表 //配置文件CREATE TABLE IF NOT EXISTS `mc_config` ( `en_name` varchar(80) NOT NULL, `ch_name` va ...

令人头疼的clientTop、scrollTop、offsetTop