console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
</head>
<body>
<script>
for (let i = 1; i <= 100; i++) {
document.writeln(`<div class="flex-item" style="background-color:#${(Math.random().toString(16) + "000000").substring(2, 8)}"></div>`)
}
</script>
<script>
const options = {
threshold: [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
}
const intersectionObserver = new IntersectionObserver((entries) => {
entries.forEach(x => {
x.target.textContent = x.intersectionRatio;
})
}, options);
[...document.querySelectorAll('div')].forEach(x => intersectionObserver.observe(x));
</script>
</body>
</html>
body {
display: flex;
flex-wrap: wrap;
width: 1600px;
}
.flex-item {
background-color: cornflowerblue;
width: 200px;
height: 200px;
margin: 10px;
}