Summary

Currently all pages are rendered to the DOM simultaneously. For large documents (100+ pages), this creates:

• High memory usage
• Slow initial render
• Potential browser performance issues

Proposed Solution

Implement virtual scrolling that only renders visible pages plus a small buffer:

1. Viewport tracking: Monitor scroll position to determine visible pages
2. Page pooling: Reuse page container elements as user scrolls
3. Placeholder sizing: Maintain correct scroll height with placeholder elements
4. Prefetching: Render pages slightly ahead of viewport

Implementation Approach

interface VirtualScrollOptions {
  bufferPages?: number;      // Pages to render outside viewport (default: 2)
  placeholderHeight?: number; // Height estimate for unrendered pages
}

class VirtualPaginationEngine extends PaginationEngine {
  private renderedPages: Map<number, HTMLElement>;
  private observer: IntersectionObserver;
  
  // Only render pages in/near viewport
  private updateVisiblePages(): void;
}

Integration with React

The PaginatedDocument component already has onPageVisible callback. Extend this:

<PaginatedDocument
  html={html}
  virtualScroll={true}
  bufferPages={3}
  onPageRender={(pageNum) => console.log(`Rendered page ${pageNum}`)}
/>

Challenges

• Accurate scroll position when pages have different heights
• Maintaining page number display during fast scrolling
• Search/find functionality across non-rendered pages
• Print preview (needs all pages)

Acceptance Criteria

• Only visible pages + buffer rendered at any time
• Smooth scrolling experience
• Correct scroll bar size/position
• Memory usage scales with viewport, not document size
• Works with keyboard navigation