useViewportScroll

Returns the viewport scroll position and re-renders the component whenever the viewport scrolls, such as for a custom scrollbar or a minimap.

const { top, left } = useViewportScroll()

• top and left are the scroll offsets of the Viewport in CSS pixels, as in native scrolling. Both are 0 while the viewport is not mounted.
• The hook is read-only. To scroll, use useScrollToPage or useScrollToBlock.
• The component re-renders on every scroll event, so keep it small. When only the page matters, useCurrentPageId re-renders far less often.

Example

import { useViewportScroll } from '@sdk-pdf/react'

function Header({ children }: { children: React.ReactNode }) {
  const { top } = useViewportScroll()

  // Shows a shadow under the header once the pages scroll beneath it.
  return <header data-scrolled={top > 0}>{children}</header>
}