Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

Element属性学习之clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度。

clientHeight

clientHeight：包括content + padding 。但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

	注意：此element.clientHeight会将获取的值四舍五入取整 如果需要小数结果请使用 element.getBondingClientRect() 
	element.getBondingClientRect() 方法只能获取元素的width/height ，但是这个值是 offsetWidth/offsetHeight，
	 包括边框的长度， 所以不能获取		clientWidth/ceightHeight。

语法 ：

 var h  = element.clientHeight
//  返回整数 h  表示element的 clientHeight （单位像素）

clientHeight 是只读的.

offsetHeight

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型（各个浏览器的offsetWidth可能有所不同）offsetWidth包含元素的border padding 竖直方向滚动条以及css设置的高度height，不包括margin

这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用				   element.getBoundingClientRect().

scrollHeight

如果存在滚动条情况 ：当本元素的子元素本元素搞且overflow = scroll / auto ，本元素会scroll 。

scrollHeight ： 因为子元素比父元素高 父元素不想被子元素撑开就会显示滚动条，在滚动的过程中子元素会有部分被隐藏， scrollHeight 表示 包括当前不可见部分的元素高度 而可见部分的高度就是clientHeight 也就是 scrollHeight >= clientHeight 恒成立 在有滚动条的时候scrollHeight才有意义 在没有滚动条的时候 scrollHeight == clientHeight恒成立 单位px 只读.

scrollTop

这些属性中唯一一个可写可读

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

scrollTop 可以被设置为任何整数值，同时注意：

• 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
• 设置scrollTop的值小于0，scrollTop 被设为0
• 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。

判定元素是否滚动到底：

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

返回顶部

element.scrollTop = 0

offsetTop

当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。