JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div id="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui eaque similique at mollitia nemo, quam sed aperiam magni quod architecto. Quia asperiores aliquid quo dolore omnis voluptas temporibus repudiandae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque iste, fugit architecto similique explicabo animi odio, in rerum neque hic iusto quia. Harum quidem beatae molestias quo. Ipsam, voluptatibus minima?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure corporis, molestiae enim iste deserunt officiis recusandae quae commodi tenetur in amet nobis esse, perspiciatis facere doloremque possimus animi reprehenderit voluptatum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui eaque similique at mollitia nemo, quam sed aperiam magni quod architecto. Quia asperiores aliquid quo dolore omnis voluptas temporibus repudiandae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque iste, fugit architecto similique explicabo animi odio, in rerum neque hic iusto quia. Harum quidem beatae molestias quo. Ipsam, voluptatibus minima?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure corporis, molestiae enim iste deserunt officiis recusandae quae commodi tenetur in amet nobis esse, perspiciatis facere doloremque possimus animi reprehenderit voluptatum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui eaque similique at mollitia nemo, quam sed aperiam magni quod architecto. Quia asperiores aliquid quo dolore omnis voluptas temporibus repudiandae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque iste, fugit architecto similique explicabo animi odio, in rerum neque hic iusto quia. Harum quidem beatae molestias quo. Ipsam, voluptatibus minima?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure corporis, molestiae enim iste deserunt officiis recusandae quae commodi tenetur in amet...

JavaScript

let options = {
  root: document.querySelector('#main'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(() => {
 console.log('we are here');
}, options);

observer.observe(document.querySelector("h1"));