一、用途

??在日常開發中，我們經常需要判斷目標元素是否在視窗之內或者和視窗的距離小于一個值（例如 100 px），從而實現一些常用的功能，例如：

• 圖片的懶加載

二、實現方式

判斷一個元素是否在可視區域，我們常用的有三種辦法：

• offsetTop、scrollTop 這種方式有一定局限性 受offsetParenty影響

• getBoundingClientRect 如果元素很多 性能不如第三種

• Intersection Observer 顧名思義 重疊觀察者（本文先不談）

offsetTop、scrollTop

offsetTop，元素的上外邊框至包含元素的上內邊框之間的像素距離，其他offset屬性如下圖所示：

image.png

• clientWidth：元素內容區寬度加上左右內邊距寬度，即clientWidth = content + padding
• clientHeight：元素內容區高度加上上下內邊距高度，即clientHeight = content + padding

這里可以看到client元素都不包括外邊距

最后，關于scroll系列的屬性如下：

• scrollWidth 和 scrollHeight 主要用于確定元素內容的實際大小

• scrollLeft 和 scrollTop 屬性既可以確定元素當前滾動的狀態，也可以設置元素的滾動位置

• • 垂直滾動 scrollTop > 0
  • 水平滾動 scrollLeft > 0

• 將元素的 scrollLeft 和 scrollTop 設置為 0，可以重置元素的滾動位置

注意

上述屬性都是只讀的，每次訪問都要重新開始
有一定局限性 offsetTop元素到最近的一個具有定位的祖宗元素的距離，若祖宗都不符合條件，祖宗為body

下面再看看如何實現判斷：
公式如下:

el.offsetTop - document.documentElement.scrollTop <=  window.innerHeight

代碼實現:

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有瀏覽器寫法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}

getBoundingClientRect

返回值是一個 DOMRect對象，擁有left, top, right, bottom, x, y, width, 和 height屬性

const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);

// {
//   bottom: 556.21875,
//   height: 393.59375,
//   left: 333,
//   right: 1017,
//   top: 162.625,
//   width: 684
// }

屬性對應的關系圖如下所示：

image.png

當頁面發生滾動的時候，top與left屬性值都會隨之改變

如果一個元素在視窗之內的話，那么它一定滿足下面四個條件：

• top 大于等于 0
• left 大于等于 0
• bottom 小于等于視窗高度
• right 小于等于視窗寬度

實現代碼如下：

function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();

  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}

例子：

// 列表數據
 // 行
<div v-for="(row, indexs) in items" :key="indexs" class="rowList" >
  <div v-for="(column, index) in coluData" :key="index" class="coluList">   // 列
    <div class="images">
       <img class="lazyImg" slot="reference" :src="logo" :data-src="row[column.columnName]" alt="" />
    </div>
  </div>
</div>
// 在生命周期中定義滾動事件
    mounted() {
      window.addEventListener('scroll', this.lazyload)
    },
    destroyed() {
      window.removeEventListener('scroll', this.lazyload)
    },
    mothods:{
      getListData(){
          this.items = getData // getdata請求到的列表數據
          this.$nextTick(()=>{
              this.lazyload()
          })
      },
      // 圖片懶加載
      lazyload(){
        let n = 0;
        let img = document.getElementsByClassName('lazyImg')
        for(let i = n; i < img.length; i++){
          if(this.isInViewPort(img[i])){     
            img[i].src = img[i].getAttribute("data-src");
            n = i + 1;
          }
        }
      },
      isInViewPort(element) {
        const viewWidth = window.innerWidth || document.documentElement.clientWidth;
        const viewHeight = window.innerHeight || document.documentElement.clientHeight;
        const {
          top,
          right,
          bottom,
          left,
        } = element.getBoundingClientRect();

        return (
          top >= 0 &&
          left >= 0 &&
          right <= viewWidth &&
          bottom <= viewHeight
        );
      },
}