Scrolling & Navigation

The PDFViewer 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.


<script lang="ts">
  import { PDFViewer, ScrollStrategy } from '@embedpdf/svelte-pdf-viewer';
</script>
 
<PDFViewer
  config={{
    documentManager: {
      initialDocuments: [{ 
        url: 'https://snippet.embedpdf.com/ebook.pdf',
        documentId: 'my-doc'
      }]
    },
    scroll: {
      defaultStrategy: ScrollStrategy.Vertical,  // or ScrollStrategy.Horizontal
      defaultPageGap: 20
    }
  }}
/>

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.

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


<script lang="ts">
  import { PDFViewer, type PluginRegistry } from '@embedpdf/svelte-pdf-viewer';
 
  let registry = $state<PluginRegistry | null>(null);
 
  const handleReady = (r: PluginRegistry) => {
    registry = r;
  };
 
  const nextPage = () => {
    const scroll = registry?.getPlugin('scroll')?.provides();
    scroll?.scrollToNextPage();
  };
 
  const goToPage = (pageNumber: number) => {
    const scroll = registry?.getPlugin('scroll')?.provides();
    scroll?.scrollToPage({ pageNumber });
  };
</script>
 
<PDFViewer onready={handleReady} config={{ src: '/doc.pdf' }} />

Targeting a Specific Document

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


<script lang="ts">
  const goToPage10 = () => {
    const scroll = registry?.getPlugin('scroll')?.provides();
    const docScroll = scroll?.forDocument('my-doc');
    docScroll?.scrollToPage({ pageNumber: 10 });
  };
</script>

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.


<script lang="ts">
  import { PDFViewer, type PluginRegistry } from '@embedpdf/svelte-pdf-viewer';
 
  const handleReady = (registry: PluginRegistry) => {
    const scroll = registry.getPlugin('scroll')?.provides();
 
    scroll?.onLayoutReady((event) => {
      // Check if this is the document we want to control
      if (event.documentId === 'my-doc' && event.isInitial) {
        scroll.forDocument('my-doc').scrollToPage({ 
          pageNumber: 3, 
          behavior: 'instant' // Instant jump for initial load
        });
      }
    });
  };
</script>
 
<PDFViewer onready={handleReady} config={{ src: '/doc.pdf' }} />

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.


<script lang="ts">
  import { PDFViewer, type PluginRegistry } from '@embedpdf/svelte-pdf-viewer';
 
  const handleReady = (registry: PluginRegistry) => {
    const scroll = registry.getPlugin('scroll')?.provides();
 
    scroll?.onPageChange((event) => {
      console.log(`Doc: ${event.documentId}`);
      console.log(`Current Page: ${event.pageNumber}`);
      console.log(`Total Pages: ${event.totalPages}`);
    });
  };
</script>
 
<PDFViewer onready={handleReady} config={{ src: '/doc.pdf' }} />