useWindowScroll

Track window scroll position.

https://www.shaktools.com/shak-hooks
Browser

API Reference

Installation

terminal
pnpm add @shak-hooks/usehooks
import.ts
import { useWindowScroll } from "@shak-hooks/usehooks";
Source: packages/react/src/useWindowScroll.ts

Signature

signature.ts
export function useWindowScroll(): WindowScrollState

Parameters

No parameters.

Returns

WindowScrollState

Exported Types

types.ts
1export interface WindowScrollState {
2 x: number;
3 y: number;
4}

Implementation

use-window-scroll.ts
1import { useState, useEffect } from "react";
2
3export function useWindowScroll() {
4 const [state, setState] = useState({ x: 0, y: 0 });
5
6 useEffect(() => {
7 const handler = () => {
8 setState({ x: window.scrollX, y: window.scrollY });
9 };
10
11 window.addEventListener("scroll", handler);
12 return () => window.removeEventListener("scroll", handler);
13 }, []);
14
15 return state;
16}

Advertisement

Google Ads

Usage

example.tsx
1import { useWindowScroll } from "@shak-hooks/usehooks";
2
3const result = useWindowScroll();
4// result: WindowScrollState
5// Use values directly (React state).

Let‘s do great work together

Empowering creators with free, high-performance AI, SEO, and developer tools. Join thousands of users optimizing their workflow with Shak-Tools.

Tools10+ Free
UsersGlobal

Stay in the loop

Join our newsletter for the latest AI tools and updates.

ShakTools
© 2025 Shaktools. All Rights Reserved.Privacy Policy