JavaScript 滚动与布局属性详解：scrollTop、scrollHeight、offsetTop、clientHeight

全文参考：https://github.com/iuap-design/blog/issues/38 、MDN

clientHeight 与 clientTop 属性解析

clientHeight 是一个只读属性。

该属性可通过公式计算：CSS height 加上 CSS padding，再减去水平滚动条的高度（若存在）。

如图所示，一个 div 元素的 clientHeight 为 95。其计算过程为：50（height）加上 30（padding-top）加上 30（padding-bottom），再减去 15（经测量的滚动条高度），最终结果为 95。

clientTop 是一个只读属性。

它表示元素顶部边框的宽度，单位为像素，实际上等同于 border-top-width。

类似的属性还有 clientLeft，其含义顾名思义。

offsetHeight 与 offsetTop 属性解析

offsetHeight 是一个只读属性。

该属性用于衡量元素的 CSS 高度，包含边框、内边距以及水平滚动条（如果存在且已渲染），返回值为整数。

仍以之前的图示为例，div 的 offsetHeight 为 112。计算方式为：50（高度）加上 60（上下内边距）加上 2（上下边框），总计 112。

offsetTop 是一个只读属性。

HTMLElement.offsetParent 是一个只读属性，返回指向包含该元素的最近定位元素的引用。若不存在定位元素，则返回最近的 table、table cell 或根元素（标准模式下为 html，怪异模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。

它返回当前元素相对于其offsetParent元素顶部的距离。

在之前的图示中，div 的 offsetTop 为 20。这是因为 margin-top 为 20，距离 html 顶部的距离即为 20。

scrollHeight 属性详解

scrollHeight 是一个只读属性。

值得注意的是，此前常有人混淆此属性。实际上它描述的是外层容器的属性，而之前误取了内层属性值，导致 scrollTop 始终为 0。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  #outer {
   margin: 100px 50px;
   background: url(http://images.cnblogs.com/cnblogs_com/wenruo/873448/o_esdese.jpg);
   height: 100px;
   width: 50px;
   padding: 10px 50px;
   overflow: scroll;
  } 
  #inner {
   height: 200px;
   width: 50px;
   background-color: #d0ffe3;
  }
 </style>
</head>
<body>
 <div id="outer">
  <div id="inner"></div>
 </div>
</body>
</html>

当父元素高度受限且设置了 overflow 属性时，子元素无法完全显示，需通过滚动条滑动查看。效果如图 1 所示；若未限制父元素高度，则显示效果如图 2。

（图1） （图2）

scrollHeight就是图2的高度，没有高度限制时，能够完全显示子元素时的高度（clientHeight）。

在此场景下，scrollHeight 为 220。计算过程为：200（内容高度）加上 10（上内边距）加上 10（下内边距），总计 220。

scrollTop 属性与返回顶部实现

scrollTop 是可读写属性。

它是上述属性中唯一既可读又可写的属性。

下图为使用微信截图工具绘制的示意图（图中意外包含了一个光标）。

当滚动条位于最顶端时，scrollTop 等于 0；当滚动条位于最底端时，scrollTop 等于 115。

该数值 115 的来源（滚动条高度经测量为 15）见下图。需说明的是，此为基于观察的主观推测，准确性不保证。

scrollTop 返回一个整数值。

若元素不可滚动，其scrollTop将被设置为0。

若设置的 scrollTop 值小于 0，scrollTop将被设为0。。

若设置的值超出容器可滚动范围，scrollTop将被设为最大值。

判定元素是否滚动到底部的逻辑如下：

element.scrollHeight - element.scrollTop === element.clientHeight

返回顶部功能。

element.scrollTop = 0

这是一个简单的返回顶部示例，需注意动画效果是由快到慢的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>返回顶部</title>
 <style>
  #outer { height: 100px; width: 100px; padding: 10px 50px; border: 1px solid; overflow: auto; }
 </style>
</head>
<body>
 <div id="outer">
  <div id="inner"></div>
 </div>
 <button onclick="toTop(outer)">返回顶部</button>
 <script>
  function toTop(ele) {
   // ele.scrollTop = 0;
   let dy = ele.scrollTop / 4; // 每次更新scrollTop改变的大小
   if (ele.scrollTop > 0) {
    ele.scrollTop -= Math.max(dy, 10);
    setTimeout(() => {
     toTop(ele, dy);
    }, 30);
   }
  }
  // 初始化
  window.onload = () => {
   for (let i = 0; i < 233; i++) inner.innerText += `第${i}行\n`;
  }
 </script>
</body>
</html>

至此，关于 JavaScript 中 scrollTop、scrollHeight、offsetTop、offsetHeight 等属性的学习笔记介绍完毕。如需了解更多相关内容，请搜索本站历史文章或浏览其他相关文章，感谢支持。