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做滚动效果

  1.  <html>
  2.  <head>
  3.      <title>测试滚动效果</title>
  4.      <meta charset="utf-8">
  5.      <style type="text/css">
  6.          #viewBox
  7.          {
  8.              width: 500px;
  9.              overflow: hidden;
  10.              border: 1px solid pink;
  11.          }
  12.  
  13.          #scrollBox
  14.          {
  15.              float: left;
  16.              width: 2500px; /*必须足够大才能放下所有滚动内容*/
  17.          }
  18.  
  19.          #A1, #A2, ul li
  20.          {
  21.              float: left;
  22.              list-style: none;
  23.          }
  24.      </style>
  25.      <script type="text/javascript">
  26.          var viewBox, As1, As2, Atimer;
  27.          function init() {
  28.              viewBox = getid("viewBox");
  29.              As1 = getid("A1");
  30.              As2 = getid("A2");
  31.              As2.innerHTML = As1.innerHTML; //复制一份相同的放在ul后面做衔接
  32.              Atimer = setInterval(Amar, 20);
  33.          }
  34.          function Amar() {
  35.              if (As1.offsetWidth <= viewBox.scrollLeft) {
  36.                  viewBox.scrollLeft -= As1.offsetWidth;
  37.              } else {
  38.                  viewBox.scrollLeft++;
  39.              }
  40.          }
  41.          function getid(id) {
  42.              return document.getElementById(id);
  43.          }
  44.          window.onload = init;
  45.      </script>
  46.  
  47.  </head>
  48.  <body>
  49.  
  50.      <div id="viewBox" onmouseover="clearInterval(Atimer)" onmouseout="Atimer=setInterval(Amar,20)">
  51.          <div id="scrollBox">
  52.              <ul id="A1">
  53.                  <li><a href="#">公告1</a></li>
  54.                  <li><a href="#">公告2</a></li>
  55.                  <li><a href="#">公告3</a></li>
  56.              </ul>
  57.              <!-- 用来做无缝衔接 -->
  58.              <ul id="A2"></ul>
  59.          </div>
  60.      </div>
  61.  </body>
  62.  </html>

显示效果：

6、一个小例子

  1.  <html>
  2.  <head>
  3.      <title>测试</title>
  4.      <meta charset="utf-8">
  5.      <style type="text/css">
  6.          *
  7.          {
  8.              margin: 0px;
  9.              padding: 0px;
  10.          }
  11.  
  12.          #container
  13.          {
  14.              width: 300px;
  15.              height: 200px;
  16.              position: absolute;
  17.              left: 200px;
  18.              top: 150px;
  19.              margin: 15px;
  20.              padding: 10px;
  21.              overflow: auto;
  22.              background-color: #555;
  23.              border: 8px solid green;
  24.          }
  25.  
  26.              #container p
  27.              {
  28.                  background-color: pink;
  29.                  width: 200px;
  30.                  height: 500px;
  31.              }
  32.      </style>
  33.  </head>
  34.  <body>
  35.      <div id="container">
  36.          <p>
  37.              文字内容
  38.          </p>
  39.      </div>
  40.      <script type="text/javascript">
  41.          /*在Chrome或Firefox下查看输出*/
  42.          console.log('元素内样式属性（不指定则为空）style.top →→→→ ' + container.style.top)
  43.          console.log('元素内样式属性（不指定则为空）style.left →→→→ ' + container.style.left)
  44.          console.log('元素内样式属性（不指定则为空）style.width →→→→ ' + container.style.width)
  45.          console.log('元素内样式属性（不指定则为空）style.height →→→→ ' + container.style.height)
  46.  
  47.          console.log('可见区域上边框(border属性指定) clientTop →→→→ ' + container.clientTop)
  48.          console.log('可见区域左边框(border属性指定) clientLeft →→→→ ' + container.clientLeft)
  49.  
  50.          console.log('内容区域宽度（包括padding 20px,不包括滚动条17px，即300+20-17=303） clientWidth →→→→ ' + container.clientWidth)
  51.          console.log('可见区域宽度（包括padding 20px 和border 16px 滚动条在其内部，没有产生额外长度）offsetWidth →→→→ ' + container.offsetWidth)
  52.          console.log('内容区域高度（包括padding 20px） clientHeight →→→→ ' + container.clientHeight)
  53.          console.log('可见区域高度度（包括padding 20px和border 16px 滚动条在其内部，没有产生额外长度） offsetHeight →→→→ ' + container.offsetHeight)
  54.  
  55.          console.log('与上层或外层偏移（包括margin 15px） offsetTop →→→→ ' + container.offsetTop)
  56.          console.log('与左层或外层偏移（包括margin 15px）  offsetLeft →→→→ ' + container.offsetLeft)
  57.  
  58.          console.log('已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollTop →→→→ ' + container.scrollTop)
  59.          console.log('已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollLeft →→→→ ' + container.scrollLeft)
  60.          console.log('滚动条最大滚动距离（即隐藏的部分的高度） scrollTopMax →→→→ ' + container.scrollTopMax)
  61.          console.log('滚动对象的完整宽度（至少是元素宽度） scrollWidth →→→→ ' + container.scrollWidth)
  62.          console.log('滚动对象的完整高度（至少是元素高度） scrollHeight →→→→ ' + container.scrollHeight)
  63.  
  64.          console.log('screen.top →→→→ ' + window.screen.top);
  65.          console.log('screen.left →→→→ ' + window.screen.left);
  66.          console.log('screen.height →→→→ ' + window.screen.height);
  67.          console.log('screen.width →→→→ ' + window.screen.width);
  68.          console.log('screen.availHeight →→→→ ' + window.screen.availHeight);
  69.          console.log('screen.availWidth →→→→ ' + window.screen.availWidth);
  70.      </script>
  71.  </body>
  72.  </html>

界面显示：

后台输出：

  1.  "元素内样式属性（不指定则为空）style.top →→→→ "
  2.  "元素内样式属性（不指定则为空）style.left →→→→ "
  3.  "元素内样式属性（不指定则为空）style.width →→→→ "
  4.  "元素内样式属性（不指定则为空）style.height →→→→ " 
  5.  "可见区域上边框(border属性指定) clientTop →→→→ 8" /*就是border-top宽度*/
  6.  "可见区域左边框(border属性指定) clientLeft →→→→ 8" /*就是border-left宽度*/
  7.  "内容区域宽度（包括padding 20px,不包括滚动条17px，即300+20-17=303） clientWidth →→→→ 303" /*参见等式①*/
  8.  "可见区域宽度（包括padding 20px 和border 16px 滚动条在其内部，没有产生额外长度）offsetWidth →→→→ 336" /*300+20+16=336,参见等式②*/
  9.  "内容区域高度（包括padding 20px） clientHeight →→→→ 220" /*元素200+padding20-滚动条0=220*/
  10.  "可见区域高度度（包括padding 20px和border 16px 滚动条在其内部，没有产生额外长度） offsetHeight →→→→ 236" /*200+20+16=236,类似等式②*/
  11.  "与上层或外层偏移（包括margin 15px） offsetTop →→→→ 165" /*150+15(margin-top),参见等式④*/
    12 "与左层或外层偏移（包括margin 15px） offsetLeft →→→→ 215"/*200+15(margin-left),类似等式④*/
  12.  "已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollTop →→→→ 0"
  13.  "已经滚动的距离（只有出现滚动条才有效，否则均为0）scrollLeft →→→→ 0"
  14.  "滚动条最大滚动距离（即隐藏的部分的高度） scrollTopMax →→→→ 290"
  15.  "滚动对象的完整宽度（至少是元素宽度） scrollWidth →→→→ 303"
  16.  "滚动对象的完整高度（至少是元素高度） scrollHeight →→→→ 510"
  17.  "screen.top →→→→ 0"
  18.  "screen.left →→→→ 0"
  19.  "screen.height →→→→ 900"
  20.  "screen.width →→→→ 1600"
  21.  "screen.availHeight →→→→ 860"
  22.  "screen.availWidth →→→→ 1600"

隐藏部分的高度scrollTopMax：

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

  1. clientTop scrollTop offsetTop

    关于top.clientTop.scrollTop.offsetTop的用法 网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.cli ...

  2. scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明

    一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...

  3. clientTop、offsetTop和scrollTop的区分

    页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...

  4. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  5. clientTop,scrollTop，兼容

    在开发中常见的额兼容性问题: scrollTop问题: function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { ...

  6. Uncaught TypeError: Cannot read property 'offsetTop' of undefined at VueComponent.handleScroll

    mounted() { window.addEventListener("scroll", this.handleScroll); }, beforeDestroy() { win ...

  7. js/jQuery使用过程中常见问题

    目录 一.jQuery选择器选择选中的或者disabled的选择框时attr函数无效 二.jQuery each函数的break/continue 三.jQuery 获取元素的left会值/left数 ...

  8. HTML input小结

    一.Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1.type=text 输入类型是text,这是我们 ...

  9. HTML元素坐标定位，这些知识点得掌握

    文档坐标和视口坐标 视口坐标是相对于窗口的坐标,而文档坐标是相对于整个文档而言.例如,在文档坐标中如果一个元素的相对于文档的Y坐标是200px,并且用户已经把浏览器向下滚动了75px,那么视口坐标中元 ...

随机推荐

  1. UDP 广播 Java

    1.服务端 public class UdpBroadcastServer { /** * @param args */ public static void main(String[] args) ...

  2. (转) VS2012程序打包部署详解

    程序编写测试完成后接下来我们要做的是打包部署程序,但VS2012让人心痛的是没有了打包工具.不知道出于什么原因微软没有将打包工具集成在开发环境中,但是我知道总会有解决办法的.     经过翻阅资料发现 ...

  3. 代码静态分析工具PCLint, Splint

    一.PCLint REFER: 代码静态检查工具PC-Lint运用实践 二.Splint 1.在PC-Linux上安装 ①make error undefined reference toyywrap ...

  4. [leetcode] 399. Evaluate Division

    我是链接 看到这道题,2个点和一个权值,然后想到图,但是leetcode就是这样,没给数据范围,感觉写起来很费劲,然后就开始用图来做,添加边的时候,注意正向边和反向变,然后查询的时候,先判断2个点是否 ...

  5. STL 常见容器

    vector: 是一种在结尾处高效插入.删除的容器,本质上是一个动态数组,可以自动维护数组的空间分配.它也允许在开头和中间插入.删除数据,但是效率极低. <span style="fo ...

  6. 腾讯视频嵌入手机端网站demo - 就像微信文章中一样一样的

    页面中的调用如下: <iframe id="video_iframe" class="video_iframe" src="TenVideoPl ...

  7. -----IT男生涯————初始篇

    大家好,我是kuuga,一名普通大学的在读生.其实,当时我不知道为什么会选择计算机这个学院,而且还选择了网络工程这个坑爹的专业.为什么说坑爹呢?因为几年学生生涯中编程已经占了很多时间和课程,至于我的专 ...

  8. yii2 model常用验证规则

    //字段必填[['username'],'required','message'=>'{attribute}不能为空!'][['username','password'], 'required' ...

  9. sql server触发器的例子

    发布:thebaby   来源:脚本学堂     [大 中 小] 本文介绍下,在sql server数据库中使用触发器的简单例子,有需要的朋友可以参考下,希望对你有一定的帮助. 原文地址:http:/ ...

  10. 基于C#的SolidWorks插件开发(2)--创建插件

    在项目工程中可以看到SwAddin.cs文件.这个文件是插件的核心文件,包括插件的名称,注册表项,菜单,以及菜单的回调函数都在该文件中实现. 1.修改插件的名称和描述 Guid为插件生成后注册到注册表 ...