Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Hooks
useWindowScroll
useWindowEvent

Attaches and manages window-level event listeners.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

useWindowScroll

Tracks the scroll position of the window and updates in real-time.

Usage

The useWindowScroll hook allows you to track the scroll position of the window. This can be useful for features like infinite scrolling, sticky elements, or scroll-based animations. Here’s an example to demonstrate how to use the useWindowScroll hook to monitor the scroll position of the window.

"use client";
import { Button } from "@/ui/button";
import { Stack } from "@/ui/stack";
import { Typography } from "@/ui/typography";
import { useWindowScroll } from "@/hooks/use-window-scroll";

export function UseWindowScrollDemo() {
  const { bottom, scrollWindow, mounted, position } = useWindowScroll();

  if (!mounted) return null;

  return (
    <Stack align="center">
      <Button
        onClick={scrollWindow}
        className="w-max"
        /* onClick={() => scrollTo({ y: position.y + 250 })} // use scrollTo() to specify a scroll with a specific value */
      >
        Scroll to {bottom ? "top" : "bottom"}
      </Button>
      <Typography prose="muted">
        window scroll x=&#123;{position.x}&#125; y=&#123;{position.y}&#125;
      </Typography>
    </Stack>
  );
}

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

use-window-scroll.ts