森泥.酷哦

加油,小可耐!

关于获取 Element 内容大小的相关属性

H5 0 评 80 度

Element.scrollHeight

Element.scrollHeight 只读属性,其高度包括元素的padding,但不包括元素的bordermargin,也包括 ::before::after这样的伪元素。

没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同

判定元素是否滚动到底

如果元素滚动到底,下面等式返回true,没有则返回false.

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

Image:scrollHeight.png

Element.scrollTop

一个元素的 scrollTop 值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0

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

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

Element.clientHeight

只读,是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

clientHeight = CSS height + CSS padding - 水平滚动条高度

Image:Dimensions-client.png

HTMLElement.offsetHeight

HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。

Image:Dimensions-offset.png

[](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)

Vertical sizing and positioning values for a child element

Element.scrollTo()

ElementscrollTo() 方法可以使界面滚动到给定元素的指定坐标位置。

scrollTo

Element.scrollIntoView()

scrollIntoView让当前的元素滚动到浏览器窗口的可视区域内。取决于其它元素的布局情况,此元素可能不会完全滚动到顶端或底端。

Bable 7 新特性