WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Hooks & Utilities

useScrollState

Hooks & UtilitiesuseScrollState
useScrollEdgesuseSelection
Live props
Options
hideOnScroll
hideDistance56px
hideOffset0px
snap
revealAtEnd
scrolledThreshold1px
Pro

v1.0.0·Added in 1.0.0

Scroll offset, progress and hide-on-scroll state for the window or any container, as motion values that move bars without re-renders.

Scroll the feed in the phone frame: the top bar slides away with your finger as you scroll down and comes back the moment you scroll up, then settles fully shown or hidden when you stop. The progress line under it fills as you read, the large title fades into the bar, and a back-to-top button appears once you pass the threshold. The readout shows direction, scrolled and hidden flipping without a render per frame.

Add to a project

npx wingo-ui@latest add use-scroll-state

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionuse-media-querymotion

Files

  • hooks/use-scroll-state.ts

See also

useScrollEdgeshookuseMediaQueryhookMotion presetslibScroll Progress
PrevioususeScrollEdgesNext useSelection
Listings

Listings

New York and nearby · 1,240 listings

direction: nonescrolled: falsehidden: falseatEnd: false
  • Trek city bike

    $1,200

    Brooklyn, Park Slope · Sep 23, 2026

  • Sleeper sofa, 3 seats

    $850

    Queens, Astoria · Sep 23, 2026

  • MacBook Air M2, 256 GB

    $4,300

    Manhattan, Chelsea · Sep 22, 2026

  • iPhone 13, 128 GB, blue

    $1,850

    Brooklyn, Williamsburg · Sep 22, 2026

  • 2 bedroom apartment, renovated

    $489,000

    Jersey City, Downtown · Sep 21, 2026

  • Honda Civic 2019, 51,000 mi

    $38,500

    Hoboken, Uptown · Sep 21, 2026

  • 4 person tent, used once

    $420

    Bronx, Riverdale · Sep 20, 2026

  • Coworking desk, monthly

    $650

    Manhattan, SoHo · Sep 20, 2026

  • Kids bike, 20 inch

    $390

    Staten Island, St. George · Sep 19, 2026

  • Upholstered armchair, gray

    $300

    Brooklyn, Downtown · Sep 19, 2026

  • Dell 27 inch monitor, 4K

    $1,100

    Queens, Flushing · Sep 18, 2026

  • Samsung Galaxy S22, like new

    $1,650

    Newark, Ironbound · Sep 18, 2026

Turn on hideOnScroll to let the bar slide away.

hideOffset 0px · snap on · revealAtEnd on · scrolledThreshold 1px