<div class="container">
	<ul class="scroller">
		<li>Lorem, ipsum dolor.</li>
		<li>Fugiat, maxime atque?</li>
		<li>Repellendus, dolorum ut.</li>
		<li>Magnam, consequatur quis?</li>
		<li>Ipsa, culpa atque?</li>
		<li>Beatae, eius vero.</li>
		<li>Aperiam, magni excepturi?</li>
		<li>Quia, repellat sed.</li>
		<li>Quis, quasi id.</li>
		<li>Architecto, vitae placeat.</li>
		<li>Vero, eum distinctio.</li>
		<li>Impedit, officiis ratione?</li>
		<li>Minus, nisi reprehenderit.</li>
		<li>Aspernatur, tempore voluptas.</li>
		<li>Eos, perferendis fuga.</li>
		<li>Quasi, culpa itaque!</li>
		<li>Dolorum, odit quasi?</li>
		<li>Laborum, possimus exercitationem.</li>
		<li>Alias, sapiente molestias.</li>
		<li>Iusto, cupiditate non.</li>
		<li>Hic, commodi dicta!</li>
		<li>Atque, voluptatum repellendus!</li>
		<li>Est, maiores perferendis!</li>
		<li>Nesciunt, hic error.</li>
		<li>Iure, perspiciatis numquam?</li>
		<li>Distinctio, possimus accusamus?</li>
		<li>Laborum, autem asperiores!</li>
		<li>Sequi, alias accusamus!</li>
		<li>Voluptatem, nam ab!</li>
		<li>Officiis, ad est?</li>
		<li>Excepturi, laudantium animi.</li>
		<li>Vel, praesentium omnis.</li>
		<li>Dolore, voluptate pariatur?</li>
		<li>Iure, earum autem?</li>
		<li>Facilis, enim dolor.</li>
		<li>Illo, aspernatur. Vel!</li>
		<li>Optio, esse ad!</li>
		<li>Quasi, totam porro.</li>
		<li>Laborum, laboriosam exercitationem!</li>
		<li>Ratione, molestias est?</li>
		<li>Fugit, mollitia fugiat?</li>
		<li>Sequi, labore voluptatibus.</li>
		<li>Explicabo, qui. Pariatur!</li>
		<li>Laudantium, eligendi tempore!</li>
		<li>Ad, corporis cum.</li>
		<li>Dolorem, voluptates obcaecati.</li>
		<li>Rerum, hic facere?</li>
		<li>Eum, consequatur? Iusto!</li>
		<li>Sapiente, totam quasi?</li>
		<li>Ipsum, delectus quas.</li>
	</ul>
</div>

* {
	box-sizing: border-box;
}
body {
	font-family: sans-serif;
}
.container {
	max-height: 100vh;
	overflow-y: scroll;
	border: 1px solid gray;
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(3rem);
	scroll-snap-type: y mandatory;
}
li {
	border-bottom: 1px solid white;
	padding: 1rem;
	font-size: 1.2rem;
	color: white;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	scroll-snap-align: start;
}

const gra = function(min, max) {
    return Math.random() * (max - min) + min;
}

const gri = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

const init = function(){
	let items = document.querySelectorAll('li');
	for (let i = 0; i < items.length; i++){
		items[i].style.minHeight = gra(20,30) + 'vh';
		items[i].style.background = randomColor({luminosity: 'light'});
	}
	
	cssScrollSnapPolyfill()
}
init();