JSFiddle - React, Tailwind, and code Playground

Intersection Observer takeRecords test.

by Travis Almand

HTML

<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.spacer {
  background: rebeccapurple;
  height: 100vh;
  margin: 10px 0;
}

JavaScript

console.clear();

let spacers = document.querySelectorAll('.spacer');
let options = {
	root: null,
  rootMargin: '0px',
  threshold: [...Array(100).keys()].map(x => x / 100)
}
let observer = new IntersectionObserver(callback, options);

spacers.forEach(spacer => {
	observer.observe(spacer);
});

function callback (entries, observer) {
	//console.log(observer);
	entries.forEach(entry => {
	    console.log(entry);
	});
}

document.body.addEventListener('click', function () {
	console.log(observer.takeRecords());
});