I am trying to implement pagination in HTML. I could show the content in two columns but unable to implement pagination. How do I implement pagination on scroll? That is, when I scroll down, it moves to next the page and when I scroll up, it should move to previous page.
If it can not be achieved in HTML, it would be better if suggest how to do in ReactJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Storybook Scroll</title>
<style>
body {
font-family: serif;
margin: 0;
padding: 20px;
background-color: #f5f5dc;
overflow-x: hidden;
}
.book-container {
max-width: 800px;
height:300px;
margin: auto;
padding: 20px;
background: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
column-count: 2;
column-gap: 40px;
column-fill: auto;
font-size: clamp(14px, 2vw, 18px);
line-height: 1.6;
text-align: justify;
}
.loading {
text-align: center;
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="book-container" id="book">
<p id="content">
Once upon a time in a faraway land, there was a small village surrounded by towering mountains and vast forests. The people of the village lived in harmony with nature, drawing their strength from the land and the wisdom of their ancestors. One day, a young traveler arrived, bringing stories of distant kingdoms and unseen wonders. The villagers gathered around to listen, their imaginations soaring beyond the boundaries of their familiar world. As days passed, the traveler shared tales of bravery, love, and adventure. Inspired by these stories, a young girl from the village decided to embark on her own journey. With a heart full of dreams, she set off into the unknown, eager to carve her own legend.
Once upon a time in a faraway land, there was a small village surrounded by towering mountains and vast forests. The people of the village lived in harmony with nature, drawing their strength from the land and the wisdom of their ancestors. One day, a young traveler arrived, bringing stories of distant kingdoms and unseen wonders. The villagers gathered around to listen, their imaginations soaring beyond the boundaries of their familiar world. As days passed, the traveler shared tales of bravery, love, and adventure. Inspired by these stories, a young girl from the village decided to embark on her own journey. With a heart full of dreams, she set off into the unknown, eager to carve her own legend.
Once upon a time in a faraway land, there was a small village surrounded by towering mountains and vast forests. The people of the village lived in harmony with nature, drawing their strength from the land and the wisdom of their ancestors. One day, a young traveler arrived, bringing stories of distant kingdoms and unseen wonders. The villagers gathered around to listen, their imaginations soaring beyond the boundaries of their familiar world. As days passed, the traveler shared tales of bravery, love, and adventure. Inspired by these stories, a young girl from the village decided to embark on her own journey. With a heart full of dreams, she set off into the unknown, eager to carve her own legend.
</p>
</div>
<div class="loading" id="loading">Loading next page...</div>
<script>
const contentElement = document.getElementById("content");
const loadingElement = document.getElementById("loading");
let pageIndex = 0;
function loadNextPage() {
if (pageIndex < storyPages.length) {
contentElement.innerHTML += " " + storyPages[pageIndex];
pageIndex++;
} else {
loadingElement.innerText = "The End";
}
}
const observer = new IntersectionObserver((entries) => {
const lastEntry = entries[0];
if (lastEntry.isIntersecting) {
loadNextPage();
}
});
observer.observe(loadingElement);
</script>
</body>
</html>