Парень для электронных книг ⇐ CSS

[Anonymous]

Я пытаюсь внедрить страницу в HTML. Я мог бы показать контент в двух столбцах, но не смог реализовать страницу. Как мне внедрить страницу на свитке? То есть, когда я прокручиваю вниз, он переходит к следующей странице, и когда я прокручиваю вверх, он должен перейти на предыдущую страницу.




Infinite Storybook Scroll

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;
}




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.

Loading next page...


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);






Подробнее здесь: https://stackoverflow.com/questions/795 ... -for-ebook