JS中不同高度与顶部的差异

每一次我看到JS在自己（clienttop），offsetheight（offsettop），scrollheight（scrollTop）在第一，这些类型之间没有明显的差异，但这些都没有见过一次或两次，每次检查他们的差异，可以用来决定。

这篇文章主要是基于Chrome标准，不同浏览器之间可能有一些差异，但是很多你还没有遇到，不是很清楚，所以遇到兼容性问题相似后，再在这里记录一下，在Chrome浏览器中每个属性之间的差异，方便以后查看。

之间的自己，不同的一offsetheight，和scrollheight

自己基本上是在所有的浏览器一样，达成的共识是，视觉区高度的内容，也就是说浏览器页面可以在这个区域的高度看，不包括滚动，但不包括利润，包括填充，也就是说实际自己=当前对象的可视区域的高度+填充值。如图自己=物体视觉面积高度显示（300）填充+价值（20）= 320
不同浏览器中的实用Javaｓｃｒｉｐｔ解决方案：
无功W = document.documentelement.clientwidth document.body.clientwidth | |；
var H = document.documentelement.clientheight document.body.clientheight | |；
offsetheight =高度+滚动条+边界值+当前对象的填充值。当前对象的高度，可见面积相同，所以offsetheight = 300 +填料（20px）+缘（10px）= 330。

scrollheight是Web内容的实际高度，最小值是自己的，也就是说，与自己是平等的，但我们假设这样一种情况，如下面的代码所示，div高度的父亲是300px，div高度网站500px，它会形成一个滚动条，的父div结构：
的父div的scrollheight应该是scrollheight = 500px +空白值

由于此时滚动条的产生，父div的可视区域为283，当前对象的高度为300，因此父级的高度为300。

自己= 283px +填充值（20px）= 303px

offsetheight =的父div的高度（300px）+填充值（20px）+缘（10px）= 330px

两clienttop之间的差异，offsettop和scrollTop

clienttop的理解可以称自己和自己的。计算的方法是当前视觉区域的高度加上填充值。然后clienttop可以理解为从可见光区域到下一级元件的距离。

如上图所示，clienttop是5px，在大多数情况下，clienttop是边界值。

offsettop是身体元素距离当前的对象，它的计算比较复杂，首先从上述认识，当前对象是指边境地区内，所以从当前对象的边缘开始offsettop计算，上述所有元素的计算是offsettop =以上所有元素缘顶+当前对象的边距+当前对象的边界上的电流，注意offsettop不是直接赋值，只能通过计算得到。

scrollTop是当前对象的顶部，在当前窗口范围当前对象的顶部边缘的距离。也就是说，当垂直滚动条出现时，滚动条绘制的距离为。

以上是js不同高度和顶部的区别，希望对您有所帮助。