All hooks / Viewport and media

useScrollDirection

190 B minified and brotliedSourceMarkdown✓ Works in all modern browsers

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

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

Usage

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

Live demo

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

function useScrollDirection(threshold?: number): ScrollDirection

Types

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