js工具函數之某dom節點是否在可視範圍之內

直接上代碼

function elementIsVisibleInViewport(el, partiallyVisible = false) {
  // 第一個參數是element  第二個參數是 是否部分可見也算可見  
  // 設置爲false 即有一部份不可見即不可見
  // 設置爲true 即部分可見即算是可見
  const {
    top,
    left,
    bottom,
    right
  } = el.getBoundingClientRect();
  const {
    innerHeight,
    innerWidth
  } = window;
  return partiallyVisible ?
    ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
    ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :
    top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
}

// 調用 測試
function test() {
  let show = document.querySelector("#show");
  console.log(elementIsVisibleInViewport(show, true))
}

代碼解析

Element.getBoundingClientRect() 方法返回元素的大小及其相對於視口的位置。

返回值是一個對象，這個對象是一組矩形的集合，就是該元素的 CSS 邊框大小。返回的結果是包含完整元素的最小矩形，並且擁有left, top, right, bottom, x, y, width, 和 height這幾個以像素爲單位的只讀屬性用於描述整個邊框。除了width 和 height 以外的屬性是相對於視圖窗口的左上角來計算的。

以可視區域左上角爲座標 0， 0

left代表element的左側邊緣到可視區左側的距離

right 代表element的右側邊緣到可視區左側的距離

top 代表 element 的上邊緣到可視區域上邊的距離

bottom 代表  element 的下邊緣到可視區域上邊的距離

通過這四個值和可視區域的寬高即可判斷。