一文读懂 offsetHeight、clientHeight、scrollHeight.....

一、 offset相关

1. offsetTop 和 offsetLeft
   只读属性，为与定位的最近的父级元素的距离，offsetParent用于获取定位的父级元素。若没有指定，则为body，offsetLeft指的是元素左侧偏移offsetParent的距离，offsetTop指的是上侧偏移的距离
2. offsetHeight 和offsetWidth
   只读属性，返回的是元素的整体高度或宽度，包括元素的边框、内边距和滚动条(如果有的话 )
   即：offsetHeight = height + padding + border
   
   offset.png

二、client 相关

clientHeight和clientWidth包括padding，但不包括border, margin和滚动条
即：clientHeight = height + padding

client.png

三、scroll 相关

1. scrollHeight 和 scrollWidth
   返回元素内容的整体尺寸，包括元素看不见的部分（需要滚动才能看见的）。返回值包括padding，但不包括margin和border
   ⚠️注意：为元素内容的高度，而不是元素的高度
2. scrollTop和scrollLeft
   如果元素不能被滚动，则为0。
   
   scroll.png

四、判定元素是否滚动到底

如果元素滚动到底，下面等式返回true，没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight