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

話不多說，方法有很多種，這里使用的是：getBoundingClientRect()方法

getBoundingClientRect()獲取元素位置，這個方法沒有參數

getBoundingClientRect()用于獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。

getBoundingClientRect()是DOM元素到瀏覽器可視范圍的距離（不包含文檔卷起的部分）。

該函數返回一個Object對象，該對象有6個屬性：top,lef,right,bottom,width,height；?

html中：
<div id="box"></div>


js中：
var object = document.getElementById('box');  
el= object.getBoundingClientRect();
el.top：元素上邊到視窗上邊的距離;
el.right：元素右邊到視窗左邊的距離;
el.bottom：元素下邊到視窗上邊的距離;
el.left：元素左邊到視窗左邊的距離;
el.width：是元素自身的寬
el.height是元素自身的高

直接上代碼，親測可用

mounted:{
    $(window).on('scroll', () => {
      console.log('scroll !')
      alert(this.isInViewPort(document.getElementById('element')))
    })
}



methods:{
    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
      )
    },
}