JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div class='scroller'>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

SCSS

.scroller {
	height: 180px;
	background-color: #333;
	width: 100%;
	overflow: auto;
	margin: 5% 0 0 0;
	ul {
		li {
			color: #fff;
			height: 18px;
			&.highlight {
				background-color: red;
			}
		}
	}
}

JavaScript

function range(start, end) {
    let foo = [];
    for (let i = start; i <= end; i++) {
        foo.push(i);
    }
    return foo;
}

const originalList = range(1, 200);

let options = {
	root: document.querySelector('.scroller'),
	rootMargin: '0px',
	threshold: 1
}

const listItems = document.querySelectorAll('.scroller ul li');

const observeCallback = entries => {
	entries.forEach((entry, i) => {
		const element = entry.target;
		element.innerHTML = originalList[i]
		if(listItems.length === entries.length) return null;
		if(entry.intersectionRatio === 1) {
			console.log([...listItems].indexOf(element))
		}
/* 		if(!element.classList.contains('highlight')) {
			element.classList.add('highlight');
		} else {
			element.classList.remove('highlight');
		} */
	})
}

const renderElements = () => {
	listItems.forEach((item, i) => {
	
	})
}

let observer = new IntersectionObserver(observeCallback, options);

listItems.forEach(item => observer.observe(item));