JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<div class="page active-page" id="page-id-1">
  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Маленькая жаренные сбить текста ты точках залетают там бросил скатился использовало реторический имени переписывается путь на берегу продолжил дал, предложения силуэт собрал рукопись курсивных запятой безопасную, коварный если продолжил большой первую?
</div>

<div class="page" id="page-id-2">
  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Маленькая жаренные сбить текста ты точках залетают там бросил скатился использовало реторический имени переписывается путь на берегу продолжил дал, предложения силуэт собрал рукопись курсивных запятой безопасную, коварный если продолжил большой первую?
</div>

<div class="page" id="page-id-3">
  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Маленькая жаренные сбить текста ты точках залетают там бросил скатился использовало реторический имени переписывается путь на берегу продолжил дал, предложения силуэт собрал рукопись курсивных запятой безопасную, коварный если продолжил большой первую?
</div>

SASS

.page
  width: 100vw
  height: 100vh
  overflow: auto
  padding: 5% 10%
  position: absolute
  top: 0
  left: 0
  z-index: 0
  color: #ecf0f1
  font-family: sans-serif
  
.active-page
  z-index: 1
  
#page-id-1
  background-color: #3498db

#page-id-2
  background-color: #f39c12

#page-id-3
  background-color: #1abc9c

JavaScript

$(document).scroll(function(){
	$(".active-page").text(
  	`${$(this).scrollTop()},
    ${$(".active-page").height()}`
  );
})