Scrolling & Navigation

The Snippet includes a powerful scroll engine capable of handling large documents with ease. It supports vertical and horizontal layouts, smooth scrolling animations, and programmatic navigation control.

Configuration

You can configure global scroll settings via the scroll property. To load specific documents with known IDs (useful for programmatic control), use documentManager.


const viewer = EmbedPDF.init({
  // ...
  documentManager: {
    initialDocuments: [{ 
      url: 'https://snippet.embedpdf.com/ebook.pdf',
      documentId: 'my-doc' // Explicit ID for targeting
    }]
  },
  scroll: {
    defaultStrategy: 'vertical',  // or 'horizontal'
    defaultPageGap: 20            // 20px gap between pages
  }
});

You can control the viewer from your own application logic—for example, building custom “Next/Previous” buttons or a table of contents that lives outside the PDF viewer.

Page 1 / 1

Targeting the Active Document

If you call methods directly on the scroll capability, they automatically apply to the currently active document (the one visible in the viewport).


const registry = await viewer.registry;
const scroll = registry.getPlugin('scroll').provides();
 
// Scrolls whatever document is currently active
scroll.scrollToNextPage();
scroll.scrollToPage({ pageNumber: 5 });

Targeting a Specific Document

If you are building a complex app with multiple documents open, you can target a specific one using its ID.


// Target the document we named 'my-doc' in config
const docScroll = scroll.forDocument('my-doc');
docScroll.scrollToPage({ pageNumber: 10 });

Scrolling on Load

Because documents load asynchronously, you cannot simply call scrollToPage immediately after initialization. Instead, you should listen for the onLayoutReady event. This event fires when the document structure is calculated and the viewer is ready to scroll.


const registry = await viewer.registry;
const scroll = registry.getPlugin('scroll').provides();
 
scroll.onLayoutReady((event) => {
  // Check if this is the document we want to control
  if (event.documentId === 'my-doc') {
    scroll.scrollToPage({ 
      pageNumber: 5, 
      behavior: 'instant' // Instant jump for initial load
    });
  }
});

Listening for Page Changes

You can listen for page change events to keep your application UI (like a “Page X of Y” label) in sync with the viewer.


const registry = await viewer.registry;
const scroll = registry.getPlugin('scroll').provides();
 
const unsubscribe = scroll.onPageChange((event) => {
  console.log(`Doc: ${event.documentId}`);
  console.log(`Current Page: ${event.pageNumber}`);
  console.log(`Total Pages: ${event.totalPages}`);
});