元素寬高 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
  
複製代碼