如何利用JS檢查元素是否在視口內

前言

分享兩個監測元素是否在視口內的方法

 

1. 位置計算

使用 Element.getBoundingClientRect() 方法返回元素相對於視口的位置

const isElementVisible = (el) => {
 const rect = el.getBoundingClientRect();
};

獲取瀏覽器窗口的寬高

const isElementVisible = (el) => {
 const rect = el.getBoundingClientRect();
 const vWidth = window.innerWidth || document.documentElement.clientWidth;
 const vHeight = window.innerHeight || document.documentElement.clientHeight;
};

判斷元素是否在視口內，如圖所示

const isElementVisible = (el) => {
 const rect = el.getBoundingClientRect()
 const vWidth = window.innerWidth || document.documentElement.clientWidth
 const vHeight = window.innerHeight || document.documentElement.clientHeight
 
 
 if (
 rect.right < 0 ||
 rect.bottom < 0 ||
 rect.left > vWidth ||
 rect.top > vHeight
 ) {
 return false
 }
 
 return true
}

getBoundingClientRect 方法會使瀏覽器發生回流和重繪，性能消耗稍大，但兼容性比 Intersection Observer 要好。

https://www.98891.com/article-81-1.html

2. Intersection Observer

Intersection Observer API提供了一種異步檢測目標元素與祖先元素或 viewport 相交情況變化的方法。在目標元素與視口或者其他指定元素發生交集時和觸發配置的回調函數。

// 獲取要監測的元素
const boxes = document.querySelectorAll('.box')
 
// 創建觀察者，配置回調函數
// 通過 isIntersecting 屬性判斷元素與視口是否相交
const observer = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {
 console.log(
 entry.target,
 entry.isIntersecting ? "visible" : "invisible"
 );
 });
})
 
boxes.forEach((box) => {
 observer.observe(box);
});