Libx

聊一聊前端各种宽高左右

字数统计: 573阅读时长: 2 min
2018/04/13 Share

引言

之前对DOM接口中各种height,height,scrollHeight,clientHeight,clientWidth等等概念有大概的了解,但是在想理清其概念的时候却发现了挺多的问题,概念有些模糊,在翻了写文档做了些测试之后来写一篇总结。

Main

offset scroll client
Height
Left
Top
Width

offset

  • offsetleft:margin + padding

  • offsettop:margin + padding;

  • offsetwidth:本身的宽度+内边距左右+边框左右;

  • offsetHeight:same

    scroll

  • Element.scrollHeight :只读,指一个元素内容高度,包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

  • Element.scrollTop: 可写 ,获取或设置一个元素的内容垂直滚动的像素数。一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个”non-scrollable”属性), scrollTop将被设置为0。设置scrollTop的值小于0,scrollTop 被设为0.如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

  • Element.scrollLeft 与xxtop类似

  • Element.scrollwidth:内容区域尺寸加上内边距加上溢出尺寸,当内容正好和内容区域匹配没有溢出时,这些属性与clientWidth和clientHeight相等

client

  • element.clientHeight:只读,对于没有定义CSS或者内联布局盒子的元素为0,同时它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。clientHeight 可以通过 CSS height + CSS padding- 水平滚动条高度 (如果存在)来计算.

  • clientleft:元素的内边距的外边缘和边框的外边缘的距离,实际就是边框的左边框宽度

  • clienttop:同理边框的上边框的宽度

  • clientwidth:用于描述元素内尺寸宽度,是指 元素内容+内边距 大小,不包括边框、外边距、滚动条部分

使用:

无限加载:element.scrollHeight - element.scrollTop === element.clientHeight

CATALOG
  1. 1. 引言
  2. 2. Main
    1. 2.1. offset
    2. 2.2. scroll
    3. 2.3. client
    4. 2.4. 使用: