快捷導(dǎo)航

如何利用JS檢查元素是否在視口內(nèi)

更新時(shí)間：2021年04月14日 09:45:55 作者：冷石

這篇文章主要給大家介紹了關(guān)于如何利用JS檢查元素是否在視口內(nèi)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

分享兩個(gè)監(jiān)測(cè)元素是否在視口內(nèi)的方法

1. 位置計(jì)算

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

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

判斷元素是否在視口內(nèi)，如圖所示

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 方法會(huì)使瀏覽器發(fā)生回流和重繪，性能消耗稍大，但兼容性比 Intersection Observer 要好。

2. Intersection Observer

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Intersection Observer API提供了一種異步檢測(cè)目標(biāo)元素與祖先元素或 viewport 相交情況變化的方法。在目標(biāo)元素與視口或者其他指定元素發(fā)生交集時(shí)和觸發(fā)配置的回調(diào)函數(shù)。

// 獲取要監(jiān)測(cè)的元素
const boxes = document.querySelectorAll('.box')

// 創(chuàng)建觀察者，配置回調(diào)函數(shù)
// 通過(guò) isIntersecting 屬性判斷元素與視口是否相交
const observer = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {
    console.log(
      entry.target,
      entry.isIntersecting ? "visible" : "invisible"
    );
  });
})

boxes.forEach((box) => {
  observer.observe(box);
});