JSFiddle - React, Tailwind, and code Playground

Intersection Observer v2 tests

by Travis Almand

HTML

<div id="scroll">
  <div class="buffer"></div>
  <div class="item"></div>
  <div class="buffer"></div>
</div>
<pre id="code"></pre>

<button id="stop">stop</button>
<button id="start">start</button>
<button id="report">report</button>

SCSS

#scroll {
  border: 1px solid rebeccapurple;
  height: 50vh;
  overflow: auto;
  
  .buffer {
    height: 100vh;
  }
  .item {
    background-color: rebeccapurple;
    height: 20vh;
  }
}

JavaScript

console.clear();

const code = document.querySelector('#code');
const start = document.querySelector('#start');
const stop = document.querySelector('#stop');
const report = document.querySelector('#report');

const options = {
	root: null,
  rootMargin: '0px',
  threshold: [0],
  trackVisibility: true,
  delay: 500
};
const observer = new IntersectionObserver(callback, options);

document.querySelectorAll('.item').forEach(item => {
	observer.observe(item);
});

function callback (entries, observer) {
	console.log(observer);
	entries.forEach(entry => {
  	console.log(entry);
    code.innerHTML = JSON.stringify(entry, null, 4);
  });
}

start.addEventListener('click', function () {
	observer.observe(document.querySelector('.item'));
});

stop.addEventListener('click', function () {
	observer.disconnect();
});
report.addEventListener('click', function () {
	console.log(observer.takeRecords());
});