彻底搞懂clientHeight,offsetHeight,offsetTop,scrollHeight,srollTop的区别

·  阅读 266

1.clientHeight

**定义:**这个属性是只读属性,对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距

计算:clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

注意:获得的是四舍五入的整数值,想要获得小数值请使用element.getBoundingClientRect(),但是这个小数值是包含边框的,慎用。inline元素也是没有的

2.offsetHeight

**定义:**是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

计算:height+padding+滚动条(如果存在)

注意:如果元素被隐藏(例如元素或者元素的祖先之一的元素的style.display被设置为none),则返回0,inline元素也是没有的

3.scrollHeight

**定义:**这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。

注意:scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。 没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

4.scrollTop

**定义:**Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。。

注意:一个元素的 scrollTop 值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop值为0。在使用显示比例缩放的系统上,scrollTop可能会提供一个小数。

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

5.offsetParent

定义:最近的一个非static的定位元素,是disblock:none则为0,父元素没有定位则是body元素

6.offsetTop

定义:最近的一个非static的定位元素之间的距离包括父元素的padding+本身的padding,是disblock:none则为0,没有定位父元素,不然就是到body的距离。

总结:利用这个原理我们可以制作关于滚动条合适下拉到底,那么就可以做下拉加载的功能。 当clientHeight+scrollTop=scrollHeight就是滑动到底的临界条件。 下一篇文章我会讲到如何制作下拉分页加载更多数据。

分类:
前端
标签:
分类:
前端
标签: