In this article, we will see how to find DOM element is visible in the current viewport or not. To determine if a DOM element is visible in the current viewport, we can compare its position and dimensions using the getBoundingClientRect() function with the dimensions of the viewport and also we can use the scroll event method.
We have a few methods that can be utilized to find whether a DOM element is visible in the current viewport, which is discussed below:
- Using the getBoundingClientRect() Method
- Using the Scroll Event Method
Approach 1: Using the getBoundingClientRect() Method
The JavaScript function getBoundingClientRect() returns a DOMRect object that represents the size and position of an element in relation to the viewport. In order to measure and position elements precisely, it offers characteristics like x, y, width, and height.
Syntax:
value.getBoundingClientRect();
Example: In this example, we are using the getBoundingRect() method with a scroll event to find the element position in our viewport.
HTML
<!DOCTYPE html> <html> <head> <title> getBoundingClientRect() Event </title> <style> body { height: 1000px; } .myDiv { width: 200px; height: 200px; background-color: skyblue; margin: 400px auto; } </style> </head> <body> <div id="div1" class="myDiv"></div> <script> function myfunction(value) { const item = value.getBoundingClientRect(); return ( item.top >= 0 && item.left >= 0 && item.bottom <= ( window.innerHeight || document.documentElement.clientHeight) && item.right <= ( window.innerWidth || document.documentElement.clientWidth) ); } const elementToCheck = document.getElementById('div1'); window.addEventListener('scroll', () => { if (myfunction(elementToCheck)) { console.log('Element is visible in viewport'); } else { console.log('Element is not visible in viewport'); } }); </script> </body> </html> |
Output:
Approach 2: Using the Scroll event method
In this approach, we are using a scroll event listener without using the getBoubdingClinetRect() method, As the user scrolls, you can continuously determine if a DOM element is visible by comparing its position to the viewport’s dimensions and taking appropriate action according to the element’s visibility state.
Syntax:
object.addEventListener("scroll", myScript);
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> <html> <head> <title>Scroll Event Example</title> <style> body { height: 1000px; } .myDiv { width: 200px; height: 200px; background-color: red; margin: 400px auto; } </style> </head> <body> <div id="div1" class="myDiv"></div> <script> function isElementVisible(element) { const elementTop = element.offsetTop; const elementBottom = elementTop + element.offsetHeight; const viewportTop = window.pageYOffset; const viewportBottom = viewportTop + window.innerHeight; return ( elementBottom > viewportTop && elementTop < viewportBottom ); } const elementToCheck = document.getElementById('div1'); window.addEventListener('scroll', () => { if (isElementVisible(elementToCheck)) { console.log('Element is visible in viewport'); } else { console.log('Element is not visible in viewport'); } }); </script> </body> </html> |
Output:
