Skip to content

Instantly share code, notes, and snippets.

@kevinfarrugia

kevinfarrugia/intersection-observer-callback.html

Last active June 10, 2022 15:02
Show Gist options
  • Save kevinfarrugia/fb7d8d33849745cd6d0ad125bb0c10e7 to your computer and use it in GitHub Desktop.
Save kevinfarrugia/fb7d8d33849745cd6d0ad125bb0c10e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
intersection-observer-callback.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Intersection Observer callback (x1,000)</title>
<style>
.emptySpace {
height: 200vh;
}
.grid {
display: grid;
grid-template-columns: 3em 3em 3em;
gap: 1em;
}
.i {
width: 3em;
height: 3em;
background-color: palegreen;
}
</style>
</head>
<body>
<div class="emptySpace">
<button onclick="window.scrollTo(0, document.body.scrollHeight);" type="button">Scroll down</button>
<p>Check browser console.</p>
</div>
<div class="grid">
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
<div class="i"></div>
</div>
<script id="rendered-js">
let hasUserInteractedWithPage = false;
// stop measuring if the user has interacted with the page
const events = ["mousedown", "keypress", "scroll", "touchstart"];
const handleUserInteraction = () => {
events.forEach((n) => {
document.removeEventListener(n, handleUserInteraction);
});
hasUserInteractedWithPage = true;
};
events.forEach((n) => {
document.addEventListener(n, handleUserInteraction, {
passive: true,
once: true,
});
});
let list = document.querySelectorAll('.i');
const observer = new IntersectionObserver((entries, observer) => {
if (!hasUserInteractedWithPage) {
console.log(`${entries.length} / ${list.length}`);
}
});
for (let target of list) {
observer.observe(target);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment