JAVASCRIPT - HOW TO Check if Element is in Screen - Javascript Source Code

JAVASCRIPT - HOW TO Check if an HTML Element is Visible in the Website Visitors Screen or Viewport with a Simple Function [isInViewport]

We can determine if an html element is visible within the website visitors screen or viewport with a very simple function that gets the left, top, right and bottom rectangle edge of the element and checks to see if any part of that element is within the viewable area of the screen. This is what the website visitor sees in their web browser.

// CHECK TO SEE IF ANY PART OF [elem] IS WITHIN // SITE VISITORS VIEWPORT (part of web page visitor can see) var isInViewport = function (element) { var bounding = element.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); };

To use this function just pass it the element in question. The function will return TRUE if any part of the element in question IS within the website visitors view and the function will return FALSE if the element is NOT within the website visitors viewport.

let samplediv = document.getElementById('sampleDiv'); let b = isInViewport(samplediv);

How to Detect WHEN Element Comes into View

To montior and detect when an element DOES come into view you can either set a timer with the Javascript function setInterval, setting an interval of perhaps a second or so, depending on how quickly you need to be alerted to when the element comes into view, or use window.onscroll

window.onscroll= function(){ let samplediv = document.getElementById('sampleDiv'); let b = isInViewport(samplediv); if(b){ // RUN YOUR DESIRED CODE AS THE ELEMENT IS VISIBLE TO WEBSITE VISITORS SCREEN } }