CSS Scroll Snap, be-careful-demo

by Felipe Alfaro

HTML

<div class="container">
	<div class="test">Try to reach me after you scrolled once! You will never find me!</div>
	<ul class="scroller">
		<li class="snap">Lorem, ipsum dolor.</li>
		<li class="snap">Fugiat, maxime atque?</li>
    <span>This can be stupid to find and read too!</span>
		<li class="snap">Repellendus, dolorum ut.</li>
		<li class="snap">Magnam, consequatur quis?</li>
		<li>Magnam, consequatur quis?</li>
		<li>Magnam, consequatur quis?</li>
		<li>Magnam, consequatur quis?</li>
		<li>Magnam, consequatur quis?</li>
		<li class="snap">It's not easy to find this one! 🥴 <br/> Because it's oversized in height, the snap is annoying here! 😯</li>
		<li class="snap">Beatae, eius vero.</li>
		<li class="snap">Aperiam, magni excepturi?</li>
		<li class="snap">Quia, repellat sed.</li>
		<li class="snap">Quis, quasi id.</li>
		<li class="snap">Architecto, vitae placeat.</li>
		<li class="snap">Vero, eum distinctio.</li>
		<li class="snap">Impedit, officiis ratione?</li>
		<li class="snap">Minus, nisi reprehenderit.</li>
		<li class="snap">Aspernatur, tempore voluptas.</li>
		<li class="snap">Eos, perferendis fuga.</li>
		<li class="snap">Quasi, culpa itaque!</li>
		<li class="snap">Dolorum, odit quasi?</li>
		<li class="snap">Laborum, possimus exercitationem.</li>
		<li class="snap">Alias, sapiente molestias.</li>
		<li class="snap">Iusto, cupiditate non.</li>
	</ul>
</div>

CSS

* {
	box-sizing: border-box;
}
body {
	font-family: sans-serif;
}
.container {
  border: 5px solid green;
  
	max-height: 100vh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}
.scroller {
  padding: 0;
}
li.snap {
	border: 5px solid aquamarine;
	padding: 1rem;
	font-size: 1.2rem;
	color: white;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	scroll-snap-align: start;
	position: relative;
}

li.snap::after {
	display: block;
	content: "";
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: 0;
	pointer-events: none;
	background-color: red;
	scroll-snap-align: end;
}

li.snap:nth-child(2) {
  height: 100vh;
}

li.snap:nth-child(6) {
  height: 150vh;
  justify-content: flex-end;
}

JavaScript

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,70) + 'vh';
		items[i].style.background = '#bada55';
	}
}
init();