JSFiddle - React, Tailwind, and code Playground

Intersection Observer test with select element

by Travis Almand

HTML

<select id="select">
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
  <option>option 4</option>
  <option>option 5</option>
  <option>option 6</option>
  <option>option 7</option>
  <option>option 8</option>
  <option>option 9</option>
  <option>option 10</option>
</select>

JavaScript

console.clear();

let select = document.querySelector('#select');
let options = {
	root: select,
  rootMargin: '0px',
  threshold: 0
}

let observer = new IntersectionObserver(callback, options);

document.querySelectorAll('#select option').forEach(option => {
	observer.observe(option);
});

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