本文主要介绍JavaScript的scrollTop、scrollHeight、offsetTop、offsetHeight等属性的学习笔记。通过示例代码详细介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
全文：https://github.com/iuap-design/blog/issues/38, MDN
clientHeight，只读
ClientHeight可以通过公式CSS height CSS padding-水平滚动条的高度(如果有的话)来计算。
如图，对于这样一个div，它的clientHeight是95，它的计算是：50(高度)30(填充-顶部)30(填充-底部)-15(测量的滚动条高度是15)=95。
clientTop，只读
元素上边框的宽度(以像素为单位)。嗯。仅边框-顶部-宽度
顾名思义，类似的属性也有clientLeft.
offsetHeight，只读
元素的offsetHeight是一个元素的CSS高度的度量，包括它的边框、内边距和水平滚动条(如果存在并被呈现)，它是一个整数。
上图中，div的offsetHeight为112。计算：50 60(上下内边距)2(上下边框)=112
offsetTop，只读
HTMLElement.offsetParent是只读属性，它返回指向包含此元素的最近位置的location元素。如果没有定位的元素，offsetParent是最近的表格、表格单元格或根元素(html在标准模式下；身体处于怪癖模式)。当元素的style.display设置为“none”时，OffsetParent返回null。
它返回当前元素到其offsetParent元素顶部的距离。
在上面的同一张图中，offsetTop div是20，因为margin-top是20，与html顶部的距离是20。
scrollHeight，只读
说实话，这么久了，我都把这个卷轴相关属性搞错了。其实描述的是outer的属性，而nest一直取inner的属性值。难怪scrollTop总是0。
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题文档/标题
风格
#外部{
边距：100px 50px
背景：URL(http://images . cn blogs . com/cn blogs _ com/文若/873448/o _ es dese . jpg)；
高度：100px
宽度：50px
填充：10px 50px
溢出：滚动；
}
#内部{
高度：200px
宽度：50px
背景色：# d0ffe3
}
/风格
/头
身体
div id='outer '
div id='inner'/div
/div
/body
/html
因为父元素的高度有限，所以无法显示所有子元素。设置溢出后，您可以滑动滚动条来查看子元素。效果如图1所示。如果父元素的高度不受限制，效果将如图2所示。
(图1)(图2)
ScrollHeight是图2的高度。当没有高度限制时，可以完全显示子元素的高度(clientHeight)。
所以这里scrollHeight是220，计算方法是：200 10 10=220
scrollTop，可写
是这些元素中唯一可以写入和读取的元素。
下图是用微信截图：D随便画的(不小心混了个光标。
所以当滚动条在顶部时，scrollTop=0，当滚动条在底部时，scrollTop=115。
这个115是怎么来的(滚动条的高度是15，我测了一下)？见下图。(是我的主观猜测，不保证准确。_(:」)_
ScrollTop是一个整数。
如果一个元素不能滚动，它的scrollTop将被设置为0。
将scrollTop的值设置为小于0，scrollTop设置为0。
如果设置的值超出了该容器的可滚动值，scrollTop将被设置为最大值。
确定元素是否滚动到末尾：
element . scroll height-element . scroll top===element . client height
返回页首
element.scrollTop=0
简单的回到顶部的时候，有一点需要注意的是，动画是从快到慢的。
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
返回页首/标题
风格
#外部{高度：100px宽度：100px填充：10px 50px边框：1px纯色；溢出：自动；}
/风格
/头
身体
div id='outer '
div id='inner'/div
/div
按钮onclick='toTop(outer)'返回到顶部/按钮
脚本
函数toTop(ele) {
//ele . scroll top=0；
让dy=他滚动top/4；///
如果(他。滚动顶部0)>
他。向上滚动-=数学。max(dy，10)；
setTimeout()
托普(他，dy)；
},30;
}
}
///
window.onload=()构造函数
对于(让我=0;i233内部。内部文字=内部文字=内部文字=内部文字=内部文字=内部文字=内部文字=内部文字=内部文字=内部文字
}
/脚本
/body
/html
滚动顶部滚动高度偏移顶部
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。