前言

在日常開發(fā)中，我們經(jīng)常需要判斷目標(biāo)元素是否在視窗之內(nèi)或者和視窗的距離小于一個值（例如 100 px），從而實現(xiàn)一些常用的功能，例如：

• 圖片的懶加載
• 列表的無限滾動
• 計算廣告元素的曝光情況
• 可點擊鏈接的預(yù)加載

實現(xiàn)方式

判斷一個元素是否在可視區(qū)域，我們常用的有offsetTop、scrollTop和getBoundingClientRect

offsetTop、scrollTop

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

下面再來了解下clientWidth、clientHeight：

• clientWidth：元素內(nèi)容區(qū)寬度加上左右內(nèi)邊距寬度，即clientWidth = content + padding
• clientHeight：元素內(nèi)容區(qū)高度加上上下內(nèi)邊距高度，即clientHeight = content + padding

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

最后，關(guān)于scroll系列的屬性如下：

• scrollWidth 和 scrollHeight 主要用于確定元素內(nèi)容的實際大小
• scrollLeft 和 scrollTop 屬性既可以確定元素當(dāng)前滾動的狀態(tài)，也可以設(shè)置元素的滾動位置
• • 垂直滾動 scrollTop > 0
  • 水平滾動 scrollLeft > 0
• 將元素的 scrollLeft 和 scrollTop 設(shè)置為 0，可以重置元素的滾動位置

注意

• 上述屬性都是只讀的，每次訪問都要重新開始

下面再看看如何實現(xiàn)判斷：

公式如下：

el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

代碼實現(xiàn)：

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
// }

屬性對應(yīng)的關(guān)系圖如下所示：

當(dāng)頁面發(fā)生滾動的時候，top與left屬性值都會隨之改變

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

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

實現(xiàn)代碼如下：

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
  );
}

以上就是JS判斷元素是否在可視區(qū)域技巧詳解的詳細(xì)內(nèi)容，更多關(guān)于JS判斷元素可視區(qū)域的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論