前言

在Web開(kāi)發(fā)中，有時(shí)我們需要知道一個(gè)元素是否在用戶的可視范圍內(nèi)，以便執(zhí)行相應(yīng)的操作，比如延遲加載圖片、實(shí)現(xiàn)懶加載、或是觸發(fā)動(dòng)畫效果。 本文將詳細(xì)介紹使用 JavaScript 如何判斷一個(gè)元素是否在可視范圍內(nèi)的幾種方法。

1. 使用 getBoundingClientRect() 方法

JavaScript 中的 getBoundingClientRect() 方法返回一個(gè)元素的大小及其相對(duì)于視口的位置信息。這個(gè)信息包括元素的上下左右邊界的坐標(biāo)，以及它們相對(duì)于視口的距離。通過(guò)這些信息，我們可以判斷元素是否在可視范圍內(nèi)。

下面是一個(gè)示例函數(shù)，用于檢查元素是否在可視范圍內(nèi)：

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

2. 使用 Intersection Observer API

Intersection Observer API 用于異步監(jiān)測(cè)元素與其祖先元素或根元素（viewport）的交叉狀態(tài)。使用這個(gè) API，我們可以注冊(cè)一個(gè)觀察器，當(dāng)目標(biāo)元素進(jìn)入或離開(kāi)視口時(shí)，會(huì)觸發(fā)相應(yīng)的回調(diào)函數(shù)。

以下是一個(gè)簡(jiǎn)單的示例，演示如何使用 Intersection Observer API：

var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      // 元素進(jìn)入視口
      console.log("Element is in viewport!");
    } else {
      // 元素離開(kāi)視口
      console.log("Element is out of viewport!");
    }
  });
});

var target = document.querySelector('#targetElement');
observer.observe(target);

3. offsetTop、scrollTop

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

下面再來(lái)了解下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)容的實(shí)際大小
• scrollLeft 和 scrollTop 屬性既可以確定元素當(dāng)前滾動(dòng)的狀態(tài)，也可以設(shè)置元素的滾動(dòng)位置
• • 垂直滾動(dòng) scrollTop > 0
  • 水平滾動(dòng) scrollLeft > 0
• 將元素的 scrollLeft 和 scrollTop 設(shè)置為 0，可以重置元素的滾動(dòng)位置

代碼實(shí)現(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
}

到此這篇關(guān)于使用JavaScript判斷一個(gè)元素是否在可視范圍內(nèi)的幾種方法的文章就介紹到這了,更多相關(guān)JavaScript判斷元素可視范圍內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論