元素宽高 offset、scroll 、client

常见的场景就是 懒加载对这些个属性的使用 下面简单分下类通俗介绍下

offset

• offsetWidth / offsetHeight 这个是自身的一个绝对宽度/ 高度

  元素自身的宽度(含border) width 属性值 + 左右 padding + 左右 border + 垂直滚动条宽度

• offsetTop / offsetLeft 距离上方元素或者上方控件距离

  距离最近的 定位 父元素（顶部/左侧）距离 如果没有定位就是根元素body的（顶部/左侧）距离

scroll

• scrollWidth / scrollHeight

  scrollWidth 滚动宽度 对象实际宽度 包括内容区和内边距，不包括边框。

  scrollHeight 滚动高度 对象实际高度 包括内容区和内边距，不包括边框。

• scrollTop / scrollLeft

  scrollTop 就是被卷起的高度 元素的最顶端到 可见区域顶部的高度

  scrollLeft 就是被卷起左侧宽度 元素的最左边到 可见区域左侧的宽度

client

• clientWidth / clientHeight

  可见区域的宽度高度 随窗口大小变化

• clientTop / clientLeft

  元素的厚度 就是上左border 左border

getBoundingClientRect

const {width, height} = el.getBoundingClientRect()获取位置信息

懒加载部分代码

  判断元素的offsetTop  跟可见区域高度+ scrollTop
  
  
  element.offsetTop 
  document.body.clientHeight + document.body.scrollTop
  
复制代码