How To Check If An Element Is Visible In The Viewport

Checking whether an element is visible in the viewport is a popular technique in modern web design.

This technique enables you to do cool stuff when an element becomes visible (or invisible) in the viewport while scrolling down (or up) the page.

Table Of Contents:

• Use Cases
• Using Plain JavaScript
• Using jQuery

Use Cases:

• Lazy Loading: Delay the loading of resources (like images and scripts) until they're scrolled into view.
• Scroll Animation: Animate DOM elements or UI components as they enter the viewport.
• Execute a callback function whenever an element will be visible on the screen.

There are a number of ways to implement DOM Visibility Detection. The best one is to use the Intersection Observer API.

Use IntersectionObserver To Check If An Element Is Visible

The IntersectionObserver is an underlying JavaScript API for detecting visibility of an element, or the relative visibility of two elements in relation to each other.

It 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 examples (JavaScript libraries) below demonstrate how to detect when an element scrolls into the viewport using the Intersection Observer API.

Is In Viewport Detection With IntersectionObserver API

A tiny example that shows how to detect if an element is in the viewport using the Intersection Observer API.

[Demo] [Download]

---

Trigger Events When An Elements Enters And Leaves The Boundary – Bounds.js

A pure JavaScript library to detect boundary asynchronously that allows you to do something when an element enters or leaves the boundary of a specific container.

[Demo] [Download]

---

Advanced Is In Viewport Checker Library – wiscroll

A tiny yet powerful ‘Is In Viewport’ checker that detects if an element enters or exits the viewport and triggers certain actions based on the scroll position.

[Demo] [Download]

---

Use jQuery To Check If An Element Is Visible

You can also use jQuery' scroll event to determine if an element is within the viewport.

This is an old-school method but is essential for visitors whose browsers don't support the IntersectionObserver API.

The jQuery plugins below demonstrate how to detect when an element scrolls into the viewport using jQuery.

jQuery Plugin To Determine If An Element Is In the Viewport - Viewport Checker

A jQuery plugin to check and determine if an element is visible within the viewport of the browser and add a class to it (or execute a callback event).

[Demo] [Download]

---

Execute A Function When An Element's Visibility Changes - jQuery scrollIntoView

A jQuery plugin to check and determine if an element is visible within the viewport of the browser and add a class to it (or execute a callback event).

[Demo] [Download]

---

jQuery Plugin For Checking If An Element Is In The Viewport - isInViewport

A super tiny jQuery plugin for checking if an html element is in the viewport. The plugin provides a simple method to return true if the element is in the viewport and false otherwise.

[Demo] [Download]

---

Conclusion:

Want more jQuery plugins or JavaScript libraries to implement DOM Visibility Detection on the web & mobile? Check out the jQuery Viewport and JavaScript jQuery Viewport sections.

See Also:

• 10 Best Lazy Loading JavaScript and jQuery Plugins
• Best Lazy Loading JavaScript Libraries
• 10 Best Scroll-triggered Animation Plugins