Skip to content

Instantly share code, notes, and snippets.

@joshuacerbito

joshuacerbito/useScroll.js

Last active January 8, 2024 13:44
Show Gist options
  • Save joshuacerbito/ea318a6a7ca4336e9fadb9ae5bbb87f4 to your computer and use it in GitHub Desktop.
Save joshuacerbito/ea318a6a7ca4336e9fadb9ae5bbb87f4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joshuacerbito revised this gist Jun 22, 2019. 1 changed file with 9 additions and 7 deletions.
    16 changes: 9 additions & 7 deletions useScroll.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,25 +8,27 @@ import { useState, useEffect } from "react";

    export function useScroll() {
    const [lastScrollTop, setLastScrollTop] = useState(0);
    const [bodyOffset, setBodyOffset] = useState(document.body.getBoundingClientRect());
    const [scrollY, setScrollYX] = useState(bodyOffset.top);
    const [bodyOffset, setBodyOffset] = useState(
    document.body.getBoundingClientRect()
    );
    const [scrollY, setScrollY] = useState(bodyOffset.top);
    const [scrollX, setScrollX] = useState(bodyOffset.left);
    const [scrollDirection, setScrollDirection] = useState();

    const listener = (e) => {
    const listener = e => {
    setBodyOffset(document.body.getBoundingClientRect());
    setScrollY(-bodyOffset.top);
    setScrollX(bodyOffset.left);
    setScrollDirection(lastScrollTop > -bodyOffset.top ? 'down' : 'up');
    setScrollDirection(lastScrollTop > -bodyOffset.top ? "down" : "up");
    setLastScrollTop(-bodyOffset.top);
    };

    useEffect(() => {
    window.addEventListener('scroll', listener);
    window.addEventListener("scroll", listener);
    return () => {
    window.removeEventListener('scroll', listener);
    window.removeEventListener("scroll", listener);
    };
    }, []);
    });

    return {
    scrollY,
  2. joshuacerbito created this gist Feb 11, 2019.
    36 changes: 36 additions & 0 deletions useScroll.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    /**
    * useScroll React custom hook
    * Usage:
    * const { scrollX, scrollY, scrollDirection } = useScroll();
    */

    import { useState, useEffect } from "react";

    export function useScroll() {
    const [lastScrollTop, setLastScrollTop] = useState(0);
    const [bodyOffset, setBodyOffset] = useState(document.body.getBoundingClientRect());
    const [scrollY, setScrollYX] = useState(bodyOffset.top);
    const [scrollX, setScrollX] = useState(bodyOffset.left);
    const [scrollDirection, setScrollDirection] = useState();

    const listener = (e) => {
    setBodyOffset(document.body.getBoundingClientRect());
    setScrollY(-bodyOffset.top);
    setScrollX(bodyOffset.left);
    setScrollDirection(lastScrollTop > -bodyOffset.top ? 'down' : 'up');
    setLastScrollTop(-bodyOffset.top);
    };

    useEffect(() => {
    window.addEventListener('scroll', listener);
    return () => {
    window.removeEventListener('scroll', listener);
    };
    }, []);

    return {
    scrollY,
    scrollX,
    scrollDirection
    };
    }