电子书滚动分页实现咨询（HTML/ReactJS）

HTML 实现方案 #

原代码逻辑为内容追加而非页面切换，且未定义关键的storyPages数组。以下是实现滚动触发上下翻页的完整修正代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子书滚动分页</title>
    <style>
        body {
            font-family: serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5dc;
            overflow: hidden;
        }

        .book-wrapper {
            max-width: 800px;
            height: 300px;
            margin: auto;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
        }

        .book-page {
            height: 300px;
            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;
            scroll-snap-align: start;
            margin-bottom: 20px;
        }

        .loading {
            text-align: center;
            font-size: 18px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="book-wrapper" id="bookWrapper">
        <div class="book-page">
            <p>
                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>
    <div class="loading" id="loading">Loading next page...</div>

    <script>
        const bookWrapper = document.getElementById('bookWrapper');
        const loadingElement = document.getElementById('loading');
        let currentPage = 0;
        // 模拟分页内容
        const storyPages = [
            `<p>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>`,
            `<p>The young girl traveled through dense forests and across rushing rivers, facing countless challenges along the way. She met a wise old hermit who taught her the secrets of the wilderness, and a mischievous fox who became her loyal companion. Together, they overcame fearsome beasts and navigated treacherous paths, inching closer to her goal. Along the way, she discovered that true bravery wasn't the absence of fear, but the courage to keep going despite it. With every step, her confidence grew, and her legend began to take shape.</p>`,
            `<p>After months of travel, the girl reached the distant kingdom she had heard so much about. The city was grand, with golden spires and bustling markets. She was welcomed with open arms, and her stories of adventure quickly made her a beloved figure. But she soon realized that the kingdom held its own secrets, and a great danger loomed on the horizon. With her newfound friends, she set out to protect the kingdom, proving that even the smallest person can make a huge difference. In the end, she returned to her village a hero, her story told for generations to come.</p>`
        ];

        function loadNextPage() {
            if (currentPage < storyPages.length) {
                const newPage = document.createElement('div');
                newPage.className = 'book-page';
                newPage.innerHTML = storyPages[currentPage];
                bookWrapper.appendChild(newPage);
                currentPage++;
            } else {
                loadingElement.innerText = 'The End';
            }
        }

        bookWrapper.addEventListener('scroll', function() {
            const scrollTop = bookWrapper.scrollTop;
            const containerHeight = bookWrapper.clientHeight;
            const scrollHeight = bookWrapper.scrollHeight;

            // 向下滚动到底部加载下一页
            if (scrollTop + containerHeight >= scrollHeight - 10) {
                loadNextPage();
            }
        });

        // 初始加载第一页额外内容
        loadNextPage();
    </script>
</body>
</html>

关键改进 #

• 用scroll-snap-type和scroll-snap-align实现页面滚动吸附，保证翻页对齐流畅
• 独立滚动容器，避免全局滚动干扰
• 监听容器滚动事件，判断滚动到底部时加载新页面
• 补充完整的分页内容数组

React 实现方案 #

如果需要在React项目中实现，以下是函数组件版本：

import React, { useState, useEffect, useRef } from 'react';

const EbookReader = () => {
  const [currentPage, setCurrentPage] = useState(0);
  const [isEnd, setIsEnd] = useState(false);
  const bookWrapperRef = useRef(null);

  // 模拟分页内容
  const storyPages = [
    `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.`,
    `The young girl traveled through dense forests and across rushing rivers, facing countless challenges along the way. She met a wise old hermit who taught her the secrets of the wilderness, and a mischievous fox who became her loyal companion. Together, they overcame fearsome beasts and navigated treacherous paths, inching closer to her goal. Along the way, she discovered that true bravery wasn't the absence of fear, but the courage to keep going despite it. With every step, her confidence grew, and her legend began to take shape.`,
    `After months of travel, the girl reached the distant kingdom she had heard so much about. The city was grand, with golden spires and bustling markets. She was welcomed with open arms, and her stories of adventure quickly made her a beloved figure. But she soon realized that the kingdom held its own secrets, and a great danger loomed on the horizon. With her newfound friends, she set out to protect the kingdom, proving that even the smallest person can make a huge difference. In the end, she returned to her village a hero, her story told for generations to come.`
  ];

  const loadNextPage = () => {
    if (currentPage < storyPages.length - 1) {
      setCurrentPage(prev => prev + 1);
    } else {
      setIsEnd(true);
    }
  };

  const handleScroll = () => {
    const wrapper = bookWrapperRef.current;
    if (!wrapper) return;

    const scrollTop = wrapper.scrollTop;
    const containerHeight = wrapper.clientHeight;
    const scrollHeight = wrapper.scrollHeight;

    // 向下滚动到底部触发下一页
    if (scrollTop + containerHeight >= scrollHeight - 10) {
      loadNextPage();
    }

    // 向上滚动到顶部返回上一页
    if (scrollTop <= 10 && currentPage > 0) {
      setCurrentPage(prev => prev - 1);
      wrapper.scrollTop = wrapper.scrollHeight - containerHeight;
    }
  };

  useEffect(() => {
    const wrapper = bookWrapperRef.current;
    if (wrapper) {
      wrapper.addEventListener('scroll', handleScroll);
      return () => wrapper.removeEventListener('scroll', handleScroll);
    }
  }, [currentPage]);

  return (
    <div style={{
      fontFamily: 'serif',
      margin: 0,
      padding: '20px',
      backgroundColor: '#f5f5dc',
      overflow: 'hidden'
    }}>
      <div 
        ref={bookWrapperRef}
        style={{
          maxWidth: '800px',
          height: '300px',
          margin: '0 auto',
          overflowY: 'auto',
          scrollSnapType: 'y mandatory'
        }}
      >
        {Array.from({ length: currentPage + 1 }).map((_, index) => (
          <div key={index} style={{
            height: '300px',
            padding: '20px',
            backgroundColor: 'white',
            boxShadow: '0 4px 10px rgba(0,0,0,0.2)',
            columnCount: 2,
            columnGap: '40px',
            columnFill: 'auto',
            fontSize: 'clamp(14px, 2vw, 18px)',
            lineHeight: '1.6',
            textAlign: 'justify',
            scrollSnapAlign: 'start',
            marginBottom: '20px'
          }}>
            <p>{storyPages[index]}</p>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', fontSize: '18px', marginTop: '20px' }}>
        {isEnd ? 'The End' : 'Loading next page...'}
      </div>
    </div>
  );
};

export default EbookReader;

React 方案说明 #

• 用useRef获取滚动容器DOM，监听滚动事件
• useState管理当前页码和结尾状态
• 支持向上滚动返回上一页、向下滚动加载下一页的双向翻页
• 保留scroll-snap属性保证页面切换流畅性

内容的提问来源于stack exchange，提问作者Trunks