Composables

usePdfKitVirtualScroll

Virtual scrolling for large documents.

Provides virtual scrolling for efficient rendering of large documents.

Usage

const containerRef = ref<HTMLElement | null>(null)
const totalItems = ref(100)
const itemHeight = ref(800)

const {
  visibleItems,
  startIndex,
  endIndex,
  scrollTop,
  onScroll,
  totalHeight,
  offsetTop,
  scrollToItem,
  currentVisiblePage,
} = usePdfKitVirtualScroll({
  totalItems,
  itemHeight,
  containerRef,
  overscan: 2,
})

Options

Option	Type	Default	Description
`totalItems`	`Ref<number>`	required	Total number of items (pages)
`itemHeight`	`Ref<number>`	required	Estimated height of each item
`containerRef`	`Ref<HTMLElement \| null>`	required	Reference to the scrollable container
`overscan`	`number`	`2`	Extra items to render above/below the viewport

totalItems, itemHeight, and containerRef are required. They must be Vue refs, not plain values. :::

Return Values

Property	Type	Description
`visibleItems`	`Ref<number[]>`	Indices of items to render
`startIndex`	`Ref<number>`	First visible item index
`endIndex`	`Ref<number>`	Last visible item index
`scrollTop`	`Ref<number>`	Current scroll position
`onScroll`	`() => void`	Container scroll handler
`totalHeight`	`Ref<number>`	Total scrollable height
`offsetTop`	`Ref<number>`	Offset for positioning visible items
`scrollToItem`	`(index: number) => void`	Scroll to a specific item
`currentVisiblePage`	`Ref<number>`	Current visible page (1-indexed)

Example

<template>
  <div ref="containerRef" class="h-[600px] overflow-auto" @scroll="onScroll">
    <div :style="{ height: `${totalHeight}px`, position: 'relative' }">
      <div
        v-for="index in visibleItems"
        :key="index"
        :style="{
          position: 'absolute',
          top: `${index * itemHeight - offsetTop}px`,
          height: `${itemHeight}px`,
        }"
      >
        <!-- Render page {{ index + 1 }} -->
      </div>
    </div>
  </div>
</template>

<script setup>
const containerRef = ref(null)
const totalItems = ref(100)
const itemHeight = ref(800)

const {
  visibleItems,
  totalHeight,
  offsetTop,
  onScroll,
  scrollToItem,
} = usePdfKitVirtualScroll({
  totalItems,
  itemHeight,
  containerRef,
})

// Scroll to page 50
scrollToItem(49)
</script>

Edit this pageorReport an issue

usePdfKitRotation

Document rotation.

Module Options

Global module configuration options.