# useScrollDirection

The direction the page last scrolled: `'up'` or `'down'`.

Re-renders only when the direction flips, not on every scroll event. Movements smaller than `threshold` pixels are ignored, so small jitters (trackpad bounce, iOS overscroll) don't flip it. Always `'up'` at the top of the page, on the server, and during hydration.

## Import

```ts
import { useScrollDirection } from '@vincent.ri/react-tils'
// or only this hook
import { useScrollDirection } from '@vincent.ri/react-tils/useScrollDirection'
```

## Usage

```ts
const direction = useScrollDirection()
return <header className={direction === 'down' ? 'header hidden' : 'header'}>…</header>
```

## When to use it

Hiding a header while scrolling down and showing it when scrolling up, or showing a "back to top" button only while scrolling up.

## When not to

You need the position itself; use `useWindowScroll`. For a header that just sticks, use CSS `position: sticky`.

## API

```ts
function useScrollDirection(threshold?: number): ScrollDirection
```

| Parameter | Description |
| --- | --- |
| `threshold` | Ignore movements smaller than this, in pixels. Default `10`. |

### Types

```ts
export type ScrollDirection = "up" | "down";
```

## Browser support

Works in all modern browsers.

---

190 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/useScrollDirection.ts
Docs page: https://vincentri.github.io/react-tils/hooks/useScrollDirection/
Previous: [useWindowScroll](https://vincentri.github.io/react-tils/hooks/useWindowScroll.md)
Next: [useScrollSpy](https://vincentri.github.io/react-tils/hooks/useScrollSpy.md)