JSFiddle - React, Tailwind, and code Playground

by denisz

HTML

<div id="scroll">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
</div>

CSS

#scroll {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  overflow: auto;
}
#scroll div {
  width: 100%;
  height: 100px;
  background-color: red; 
  margin: 5px 0;
}

JavaScript

const view = document.getElementById('scroll');

const observerOptions = {
    root: view,
    rootMargin: "100px",
    threshold: [0, 1]
};

const observer = new IntersectionObserver((items) => {
	items.forEach(item => {
  	if(item.isIntersecting) {
    	item.target.classList.add('visible');
    } else {
    	item.target.classList.remove('visible');
    }
  });
}, observerOptions);

const children = document.body.querySelectorAll('#scroll > div');

children.forEach(el => observer.observe(el));