How can I know If a webcomponent is on screen in litelement?

Question

Im doing a small proyect with litelement, but I want to fire an event when a webcomponent is shown, not only the first time, but every time that the component shows, how can I do that?

thanks in advance

Harshal Patil · Accepted Answer · 2019-12-12 05:59:25Z

0

Intersection Observer API will help you find if the element is on the screen. For more information, visit MDN docs.

// 1. Observer options
let options = {
  // The scroll area - mostly body or document
  root: document.querySelector('#parent'),
  rootMargin: '0px',
  threshold: 1.0
};

let callback = () => { /* Do something */ };

// Observe Element
let observer = new IntersectionObserver(callback, options);

// Start observing
const targetElm = document.querySelector('#target');
observer.observe(targetElm);

The API is supported on all browsers except IE but a polyfill is already available: https://github.com/w3c/IntersectionObserver

answered Dec 12, 2019 at 5:59

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I know If a webcomponent is on screen in litelement?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related