我怎么知道一個 webcomponent 是否在 litelement 的屏幕上？

Question

我正在用 litelement 做一個小項目，但是我想在顯示 webcomponent 時觸發一個事件，不僅是第一次，而且每次顯示組件時，我該怎么做？

提前致謝

Answer 1

Intersection Observer API將幫助您查找元素是否在屏幕上。 有關更多信息， 請訪問 MDN 文檔。

// 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);

除了 IE 之外的所有瀏覽器都支持 API，但已經提供了一個 polyfill： https : //github.com/w3c/IntersectionObserver