JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="hide">
  <div class="wrap">
    <div class="content" id="test">
      alskdjflaksjdflaskjdfl;aksjdfl;aksjdf;laksjdf;laksjdf;lkasjdf;lkajsdf;lkjas;ldfkja;sldkjf
    </div>
  </div>
</div>

CSS

.wrap {
  max-width: 100%;
  border: 1px solid red;
  overflow: auto;
}

.content {
  display: flex;
  border: 1px solid blue;
  padding: 50px 50px 100px 50px;
}

.hide {
  overflow: hidden;
  height: 350px;
}

JavaScript

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const intersecting = entry.isIntersecting
    entry.target.style.backgroundColor = intersecting ? "blue" : "orange"
  })
},  { threshold: 1 })

observer.observe(document.getElementById("test"))