JSFiddle - React, Tailwind, and code Playground

Intersection Observer rootMargin test

by Travis Almand

HTML

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

CSS

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

body {
  height: 100vh;
  overflow: auto;
}

.spacer {
  height: 150vh;
}

#spacer {
  background: rebeccapurple;
  height: 100vh;
}

JavaScript

console.clear();

let spacer = document.querySelector('#spacer');
let options = {
	root: document.body,
  rootMargin: '0px',
  threshold: 0
}
let observer = new IntersectionObserver(callback, options);
observer.observe(spacer);

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