# useViewportScroll

Source: https://sdk.pdf.net/docs/v1/reference/useViewportScroll



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

```ts
const { top, left } = useViewportScroll()
```

* `top` and `left` are the scroll offsets of the [Viewport](https://sdk.pdf.net/docs/v1/reference/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](https://sdk.pdf.net/docs/v1/reference/useScrollToPage) or [useScrollToBlock](https://sdk.pdf.net/docs/v1/reference/useScrollToBlock).
* The component re-renders on every scroll event, so keep it small. When only the page matters, [useCurrentPageId](https://sdk.pdf.net/docs/v1/reference/useCurrentPageId) re-renders far less often.

## Example [#example]

```tsx
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>
}
```