JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="body">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus rem dicta eaque. Aspernatur accusantium, tenetur corrupti officiis ipsa itaque consequuntur animi laboriosam quaerat tempora. Officia architecto eveniet consequuntur laudantium perferendis!</div>
<div>Dolor, impedit. Odio nesciunt doloribus modi quis fugiat unde tempore earum, atque nihil harum molestiae, voluptatem saepe fuga facere porro debitis, eum perferendis consequuntur distinctio velit ratione ab repellat dolor!</div>
<div>Modi eos neque quod pariatur a blanditiis quae nihil at ullam quibusdam unde deleniti atque illum, voluptate magni deserunt debitis necessitatibus adipisci totam animi. Eos non voluptates culpa, facilis voluptatem.</div>
<div>Eum reprehenderit rem, delectus accusamus cupiditate, doloremque architecto ad, expedita laborum, vel quidem corporis! Culpa quos pariatur quam ratione velit delectus ducimus ab blanditiis aliquid quae dignissimos, officiis ipsum optio.</div>
<div>Corrupti architecto, provident voluptatem explicabo, quod aliquid odio magnam animi in molestiae ullam nemo deserunt illo. Cupiditate suscipit laudantium vel accusantium architecto quidem quibusdam quo necessitatibus, odit perspiciatis nobis magni.</div>
<div>Deleniti modi eos, reiciendis velit eligendi similique maxime, nesciunt repudiandae, laborum veniam mollitia fugiat pariatur. Nihil minima esse amet reiciendis ipsa dignissimos, hic distinctio debitis dolorum accusantium, cum laborum ex.</div>
<div>In dolores maxime, facere a odio, optio doloribus. Ratione, ex. Obcaecati, sequi ratione optio non minus alias quo fuga, in cupiditate! Sunt amet vel obcaecati architecto, dolorem iste est ad?</div>
<div class="hey">
HEY
</div>
<div>Placeat recusandae voluptatem dolor eaque autem veniam at consectetur qui totam obcaecati eius, sunt in, dolorum odit, perspiciatis aspernatur. Non rem voluptas, alias veritatis quos cum doloremque mollitia fugiat, neque.</div>
<div>Et placeat vitae vero....

CSS

.body {
  width: 300px;
}

.hey {
  background: yellow;
}

JavaScript

const yo = document.querySelector('.hey');
const dude = document.querySelector('.dude');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const intersecting = entry.isIntersecting
    if(!intersecting){
      console.log('ope');

    } else {
      console.log(entry);
    }
  })
},  { threshold: .99 })

observer.observe(yo);
observer.observe(dude);