JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bookzone" onscroll="scollPos();">

    <div style="width:400;height:400;"><div id="p1" style="display:none;">Page 1</div></div>
    <div style="width:400;height:400;"><div id="p2" style="display:none;">Page 2</div></div>
    <div style="width:400;height:400;"><div id="p3" style="display:none;">Page 3</div></div>
    <div style="width:400;height:400;"><div id="p4" style="display:none;">Page 4</div></div>
    <div style="width:400;height:400;"><div id="p5" style="display:none;">Page 5</div></div>
    <div style="width:400;height:400;"><div id="p6" style="display:none;">Page 6</div></div>
    <div style="width:400;height:400;"><div id="p7" style="display:none;">Page 7</div></div>
    <div style="width:400;height:400;"><div id="p8" style="display:none;">Page 8</div></div>
    <div style="width:400;height:400;"><div id="p9" style="display:none;">Page 9</div></div>
    <div style="width:400;height:400;"><div id="p10" style="display:none;">Page 10</div></div>
    <div style="width:400;height:400;"><div id="p11" style="display:none;">Page 11</div></div>
    <div style="width:400;height:400;"><div id="p12" style="display:none;">Page 12</div></div>
    
</div>

CSS

.bookzone { margin:0; padding:0; overflow:scroll; }

JavaScript

function scollPos() {
		var sp = document.getElementById("bookzone").scrollTop;
		if (sp > 100) {
			document.getElementById("p2").style.display = "block";
		}
	}