How to Check if an Element is in the Viewport in JavaScript

Serhii Shramko /

Using the Intersection Observer API

The Intersection Observer API provides a more efficient and modern approach to check if an element is in the viewport. Here's how you can use it:

// Define the callback function to handle intersection changes
const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in the viewport!');
      // You can also add any other actions you want to perform here

// Create an instance of IntersectionObserver
const observer = new IntersectionObserver(callback, {
  root: null, // Use the viewport as the root
  rootMargin: '0px',
  threshold: 0.1 // Adjust the threshold as needed

// Target the element to observe
const targetElement = document.querySelector('#yourElementId');

In this example:

  • The callback function is executed whenever the visibility of the target element changes.
  • The IntersectionObserver is configured to use the viewport as the root, with no margin and a threshold of 10% visibility to trigger the callback.
  • Finally, the observer is set to watch the target element.

Using a Manual Check

If you prefer a manual approach, you can use the following function to determine if an element is in the viewport:

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

// Usage example
const element = document.querySelector('#yourElementId');
if (isElementInViewport(element)) {
  console.log('Element is in the viewport!');

This function calculates the bounding rectangle of the element and checks if it lies within the viewport boundaries.