JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<main>
  <div class="pane"></div>

  <div id="visible"></div>
</main>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 20em;
  height: 14em;
}

.pane {
  flex: 1 1 auto;
  width: 100%;
  overflow: auto;
  box-shadow: 0 0 3px 1px black;
}

.pane>* {
  width: 90%;
  margin: 1em auto;
  background: #c9c9c9;
}

#visible {
  height: 2em;
}

JavaScript

const pane = document.querySelector('.pane')
const visible = document.querySelector('#visible');
const numbers = Array.from({
  length: 40
}, (x, i) => i + 1)

const elements = numbers.map(number => {
  const div = document.createElement('div')
  div.textContent = number.toString();
	pane.appendChild(div);
  return div;
});

function tick() {
	const matches = [];
	const paneB = pane.getBoundingClientRect();
	for (const el of elements) {
  	const b = el.getBoundingClientRect();
  	if (
	    b.top > paneB.bottom
      || b.bottom < paneB.top
      || b.left > paneB.right
      || b.right < paneB.left

    )  {
    continue;
    }
    matches.push(el.textContent);
  }
  
  visible.textContent = matches.join(', ')
	requestAnimationFrame(tick);
}

requestAnimationFrame(tick);