Add a event to HTML element when it becomes on the user screen

Question

I want to add a event to HTML element when it becomes on the user screen using only Javascript or React components but not jQuery.

I'm using react components and I want to run setInterval() function to make a simple counter using state, but the problem is the code runs when page is rendered, I want to start code only when the element becomes on the screen.

"javascript detect when an element is added" <-- did you search — epascarello, Jan 23 '20 at 20:19
becomes what? can you explain in detail and the ways you tried. so that we can help you — Uthistran Selvaraj, Jan 23 '20 at 20:19
Do you want to know when an element that is not in the **viewport** enters the **viewport** because the page was scrolled or resized ? — Titus, Jan 23 '20 at 20:22
What have you tried so far? Please add that to your question. — David Hempy, Jan 23 '20 at 20:24
i'm using react components and i want to run setInterval() function to make a simple counter using state , but the problem is the code runs when page is rendered , i want to start code only when the element becomes on the screen. @UthistranSelvaraj — Mohamed Abd Ellatif, Jan 23 '20 at 20:28
@MohamedAbdEllatif: The terminology you're looking for is to "detect when an element is in the viewport". From there, a Google search leads to some examples. For example, this React component: https://www.npmjs.com/package/react-in-viewport — David, Jan 23 '20 at 20:35

Paul Mannarino · Answer 1 · 2020-01-23T21:41:51.953

I don't think you can accomplish this by adding an event to the element itself. I think you'll have to add listeners to the window for any events that can possibly change which elements are in view (load, scroll, resize).

I borrowed isScrolledIntoView() from this answer

// Get your element however you'd like
let myElmement = document.getElementById('myElement');
// Loop through possible events that will bring element into view
['resize','scroll','load'].forEach( eventName => {
  window.addEventListener(eventName, event => {
    if (isScrolledIntoView(myElmement)) {
      doYourThing();
    } else {
      console.log('nope');
    }
  });
});

// Borrowed from https://stackoverflow.com/a/22480938/12771340
function isScrolledIntoView(el) {
  let rect = el.getBoundingClientRect();
  let elemTop = rect.top;
  let elemBottom = rect.bottom;

  // Only completely visible elements return true:
  let isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
  // Partially visible elements return true:
  //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
  return isVisible;
}

ReQserFirFir · Answer 2 · 2020-01-24T20:11:43.590

0

function isUserCanSeeIt(elemClassName,elemNumber){
    var elem = document.getElementsByClassName(elemClassName)[elemNumber];
    var elemPos = elem.getBoundingClientRect();
    if(elemPos.top > 0){
        return true;
    }
    else return false;
}
function event(elemClassName,elemNumber){
    if(isUserCanSeeIt(elemClassName)){
        doSomething();
    }
}
event("someClassName",0);

edited Jan 24 '20 at 20:11

answered Jan 23 '20 at 21:06

ReQserFirFir

17
7

score 0 · Accepted Answer · answered Jan 23 '20 at 21:15

Use an intersection observer and set the interval within the callback:

let isIntersected = false;

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    let count = 0;
    if (entry.intersectionRatio > 0 && !isIntersected) {
      isIntersected = true;
      setInterval(() => {
        document.querySelector("#counter").innerText = count;
        count++;
      }, 1000);
    }
  });
});

observer.observe(document.querySelector('.counter-container'))

A not very optimized example:

jsfiddle

Add a event to HTML element when it becomes on the user screen

3 Answers3