How to use JS to check if an element is within the viewport

Preface

Share two methods to monitor whether an element is within the viewport

1. Position calculation

Use the Element.getBoundingClientRect() method to return the position of the element relative to the viewport

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

Get the width and height of the browser window

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

Determine whether the element is within the viewport, as shown in the figure

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
}

The getBoundingClientRect method will cause the browser to reflow and redraw, which consumes slightly more performance, but has better compatibility than 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.

The Intersection Observer API provides a way to asynchronously detect changes in the intersection of a target element with an ancestor element or the viewport. The configured callback function is triggered when the target element intersects the viewport or other specified elements.

// Get the elements to monitor const boxes = document.querySelectorAll('.box')

// Create an observer and configure the callback function // Use the isIntersecting property to determine whether the element intersects with the viewport const observer = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {
    console.log(
      entry.target,
      entry.isIntersecting ? "visible" : "invisible"
    );
  });
})

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

refer to

how-to-check-an-element-is-in-viewport-4bcl

Intersection Observer API

Summarize

This concludes this article on how to use JS to check if an element is within the viewport. For more information about how to use JS to check if an element is within the viewport, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!