---
url: "https://vueda.dev/v3/reference/api/js/use/useScrollReveal.md"
title: "use/useScrollReveal"
---

# use/useScrollReveal

## Overview

Tracks scroll direction against a scroll target (the window or a scrollable
container) and derives a `hidden` flag for page chrome that should slide out of view while the
user reads and return on intent. The reveal strategy is selectable per consumer so a single
scroll model can drive different tiers of sticky chrome: a submit bar that should return the
moment scrolling pauses, a space-reclaiming toolbar that should stay hidden until a deliberate
scroll up, or a footer that never hides. Extracted from `StickyBar` so the sticky-stack zones can
reuse the same logic with a different reveal behavior per zone.

## Methods

- [revealHidden](/v3/reference/api/js/use/useScrollReveal/functions/revealHidden.md) - Resolve whether chrome should be hidden, given a reveal strategy and the current scroll signals.
- [useScrollReveal](/v3/reference/api/js/use/useScrollReveal/functions/useScrollReveal.md) - Derive a reactive `hidden` flag from scroll direction for hide-on-scroll page chrome.

## Types

### [ScrollRevealContext](/v3/reference/api/js/use/useScrollReveal/types/ScrollRevealContext.md)

### [ScrollRevealOptions](/v3/reference/api/js/use/useScrollReveal/types/ScrollRevealOptions.md)

### [ScrollRevealState](/v3/reference/api/js/use/useScrollReveal/types/ScrollRevealState.md)

### [ScrollRevealStrategy](/v3/reference/api/js/use/useScrollReveal/types/ScrollRevealStrategy.md)

`always`: never hides. `hidden` stays `false` regardless of scroll position.
- `scroll-up`: hides once the element's original position has scrolled out of view and stays
  hidden until the user scrolls up. No idle reveal, so it does not pop back when the user pauses
  to read; suited to the space-reclaiming toolbar tier.
- `scroll-up-or-idle`: like `scroll-up`, but also reveals after scrolling pauses for `idleDelay`
  milliseconds. Suited to a submit / action bar the user should be able to return to quickly.

A `reveal` that resolves to a boolean instead of one of these strings hands visibility control
back to the caller entirely: `true` means revealed (`hidden` is `false`), `false` means hidden.
Pass a boolean ref/getter (typically a `computed`) to drive show/hide from the view's own logic;
in that mode scroll position is ignored.

`ScrollRevealStrategy = "always" | "scroll-up" | "scroll-up-or-idle"`

## Source

`client/lib/use/useScrollReveal.js:1`