欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js監(jiān)聽元素是否出現在可視區(qū)域詳解(IntersectionObserver)

 更新時間：2024年06月13日 10:36:07   作者：甩鍋工程師  
這篇文章主要給大家介紹了關于js監(jiān)聽元素是否出現在可視區(qū)域(IntersectionObserver)的相關資料, IntersectionObserver是一個JavaScript API,用于監(jiān)測一個元素與其父元素或視窗的交叉狀態(tài),需要的朋友可以參考下

觀察者模式監(jiān)聽判斷dom元素是否在可視區(qū)域內

本項目是使用vue3的寫法。

1.IntersectionObserver

IntersectionObserver可以用來自動監(jiān)聽元素是否進入了設備的可視區(qū)域之內，而不需要頻繁的計算來做這個判斷。由于可見（visible）的本質是，目標元素與視口產生一個交叉區(qū)，所以這個 API 叫做"交叉觀察器"

const observer = new IntersectionObserver(callback, option);

IntersectionObserver 是瀏覽器原生提供的構造函數，接受兩個參數：

  • callback：可見性發(fā)現變化時的回調函數
  • option：配置對象（可選）。

構造函數的返回值是一個觀察器實例。實例一共有4個方法：

  • observe：開始監(jiān)聽特定元素
  • unobserve：停止監(jiān)聽特定元素
  • disconnect：關閉監(jiān)聽工作
  • takeRecords：返回所有觀察目標的對象數組

1.1 observe 方法

該方法需要接收一個target參數，值是Element類型，用來指定被監(jiān)聽的目標元素

// 獲取元素
const target = document.getElementById("dom");

// 開始觀察
io.observe(target);

1.2 unobserve 方法

該方法需要接收一個target參數，值是Element類型，用來指定停止監(jiān)聽的目標元素

// 獲取元素
const target = document.getElementById("dom");

// 停止觀察
io.unobserve(target);

1.3 disconnect 方法

該方法不需要接收參數，用來關閉觀察器

// 關閉觀察器
io.disconnect();

// 頁面加載時監(jiān)聽元素
onMounted(() => {
	var demo3 = document.querySelector('document.querySelector(dom))  //  獲取元素
	var observer = new IntersectionObserver((mutaions)=>{  // 創(chuàng)建IntersectionObserver對象
	        console.log(mutaions[0].isIntersecting)
	      })
	observer.observe(demo3)       // 需要監(jiān)聽的元素 
}

1.4 takeRecords 方法

該方法不需要接收參數，返回所有被觀察的對象，返回值是一個數組

// 獲取被觀察元素
const observerList = io.takeRecords();

1.5 callback 參數

目標元素的可見性變化時，就會調用觀察器的回調函數callback。

callback一般會觸發(fā)兩次。一次是目標元素剛剛進入視口，另一次是完全離開視口。

const io = new IntersectionObserver((changes, observer) => {
  console.log(changes);
  console.log(observer);
});

1.6 options

  • threshold: 決定了什么時候觸發(fā)回調函數。它是一個數組，每個成員都是一個門檻值，默認為[0]，即交叉比例（intersectionRatio）達到0時觸發(fā)回調函數。用戶可以自定義這個數組。比如，[0, 0.25, 0.5, 0.75, 1]就表示當目標元素 0%、25%、50%、75%、100% 可見時，會觸發(fā)回調函數。
  • root: 用于觀察的根元素，默認是瀏覽器的視口，也可以指定具體元素，指定元素的時候用于觀察的元素必須是指定元素的子元素
  • rootMargin: 用來擴大或者縮小視窗的的大小，使用css的定義方法，10px 10px 30px 20px表示top、right、bottom 和 left的值

2. IntersectionObserverEntry 對象

changes數組中的每一項都是一個IntersectionObserverEntry 對象

  • boundingClientRect：目標元素的矩形區(qū)域的信息
  • intersectionRatio：目標元素的可見比例，即intersectionRect占
    boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0
  • intersectionRect：目標元素與視口（或根元素）的交叉區(qū)域的信息
  • isIntersecting: 布爾值，目標元素與交集觀察者的根節(jié)點是否相交（常用）
  • isVisible: 布爾值，目標元素是否可見（該屬性還在試驗階段，不建議在生產環(huán)境中使用）
  • rootBounds：根元素的矩形區(qū)域的信息，getBoundingClientRect()方法的返回值，如果沒有根元素（即直接相對于視口滾動），則返回null
  • target：被觀察的目標元素，是一個 DOM 節(jié)點對象（常用）
  • time：可見性發(fā)生變化的時間，是一個高精度時間戳，單位為毫秒

3. 是否在可視區(qū)域

onMounted(() => {
	var observer = new IntersectionObserver((entries) => {
		  console.log(111111, entries[0].isIntersecting);
		  dataMap.showMyBox = !entries[0].isIntersecting; //返回true代表在頁面可視區(qū)域，false代表不在頁面可視區(qū)域。
		});
		 observer.observe(document.querySelector(dom));
}
// 頁面卸載時可解綁
onBeforeUnmount(() => {
	  if (observer) {
		    observer.unobserve(document.querySelector(dom)); //解綁元素
		    observer.disconnect(); //停止監(jiān)聽
	  }
});

4. 圖片懶加載

使用 IntersectionObserver 非常容易實現圖片懶加載，首先需要觀察懶加載元素，然后等元素進入可視區(qū)域后設置圖片 src；同時，還可以結合 IntersectionObserver.rootMargin 實現提前加載圖片，一般可以設置為 1~2 倍瀏覽器窗口的視口高度，優(yōu)化用戶體驗

/**
 * @method lazyLoad
 * @param {NodeList} $imgList      圖片元素集合
 * @param {number}   preloadHeight 預加載高度
 */
export function lazyLoad($imgList, preloadHeight = 1000) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) { // 目標元素出現在 root 可視區(qū)，返回 true
        const $target = entry.target
        const src = $target.getAttribute('lazyload')

        if (src) {
          $target.setAttribute('src', src) // 真正加載圖片
        }
        observer.unobserve($target) // 解除觀察
      }
    })
  }, {
    rootMargin: `0px 0px ${preloadHeight}px 0px`,
  })

  Array.prototype.forEach.call($imgList, ($item) => {
    if ($item.getAttribute('src')) return // 過濾已經加載過的圖片
    observer.observe($item) // 開始觀察
  })
}

使用方法：

// 圖片元素設置 lazyload 屬性
<img lazyload="圖片鏈接" alt="圖片說明">

// 觀察圖片元素
lazyLoad(document.querySelectorAll("[lazyload]"))

5. 元素吸頂、吸底

如果頁面結構比較簡單可以直接使用 css 粘性布局。

IntersectionObserver 實現元素固定思路也很簡單，首先需要給固定元素包一層父元素，父元素指定高度占位，防止固定元素吸附時頁面抖動，然后觀察父元素的可視狀態(tài)變化，當父元素即將離開可視區(qū)域時改變固定元素的樣式。

/**
 * @method fixBanner
 * @param {HTMLElement} $observeEle 觀察元素
 * @param {HTMLElement} $fixEle     固定定位元素
 */
export function fixBanner($observeEle, $fixEle) {
  const $ele = $fixEle
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        $ele.style.cssText = ''
      } else {
        $ele.style.cssText = 'position: fixed; top: 0; left: 0'
      }
    })
  }, {
    threshold: 1, // threshold 設置為 1 表示目標元素完全可見時觸發(fā)回調函數
  })

  observer.observe($observeEle) // 開始觀察
}

6. 加載更多

IntersectionObserver 實現加載更多需要在列表后面增加一個尾部元素（比如加載更多動畫），當尾部元素進入可視區(qū)域就加載更多數據，注意尾部元素一定要一直處于所有列表元素的后面。

提前加載高度不能隨意設置，如果設置太大會導致尾部元素一直處于可視狀態(tài)。

function loadMore() {
  const observer = new IntersectionObserver(
    (entries) => {
      const loadingEntry = entries[0]

      if (loadingEntry.isIntersecting) {
        // 請求數據并插入列表
      }
    },
    {
      rootMargin: '0px 0px 600px 0px', // 提前加載高度
    },
  )

  observer.observe(document.querySelector('.mod_loading')) // 觀察尾部元素
}

總結 

到此這篇關于js監(jiān)聽元素是否出現在可視區(qū)域(IntersectionObserver)的文章就介紹到這了,更多相關js監(jiān)聽元素出現可視區(qū)域內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論