Skip to content

Instantly share code, notes, and snippets.

@reecelucas

reecelucas/useScrollDirection.js

Last active September 8, 2021 20:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save reecelucas/cd110ece696cca8468db895281fa28cb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save reecelucas/cd110ece696cca8468db895281fa28cb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. reecelucas revised this gist Apr 12, 2019. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion useScrollDirection.js
    View file
    Original file line number Diff line number Diff line change
    @@ -34,7 +34,10 @@ const useScrollDirection = ({
    }
    };

    // Reset scroll direction if `off` is set to true
    /**
    * Bind the scroll handler if `off` is set to false.
    * If `off` is set to true reset the scroll direction.
    */
    !off
    ? window.addEventListener("scroll", onScroll)
    : setScrollDir(initialDirection);
  2. reecelucas revised this gist Apr 12, 2019. 1 changed file with 30 additions and 38 deletions.
    68 changes: 30 additions & 38 deletions useScrollDirection.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,48 +7,40 @@ const useScrollDirection = ({
    off
    } = {}) => {
    const [scrollDir, setScrollDir] = useState(initialDirection);
    const lastScrollY = useRef();
    const ticking = useRef(false);
    const threshold = thresholdPixels || 0;

    const updateScrollDir = () => {
    const scrollY = window.pageYOffset;

    if (Math.abs(scrollY - lastScrollY.current) < threshold) {
    // We haven't exceeded the threshold
    ticking.current = false;
    return;
    }

    setScrollDir(scrollY > lastScrollY.current ? SCROLL_DOWN : SCROLL_UP);
    lastScrollY.current = scrollY > 0 ? scrollY : 0;
    ticking.current = false;
    };

    const onScroll = () => {
    if (!ticking.current) {
    window.requestAnimationFrame(updateScrollDir);
    ticking.current = true;
    }
    };

    useEffect(() => {
    if (off) {
    // Reset scroll direction if `off` is set to true
    setScrollDir(initialDirection);
    }
    }, [off]);

    useEffect(() => {
    // Initialise scrollY to current scroll position
    lastScrollY.current = window.pageYOffset;

    if (!off) {
    window.addEventListener("scroll", onScroll);
    }
    const threshold = thresholdPixels || 0;
    let lastScrollY = window.pageYOffset;
    let ticking = false;

    const updateScrollDir = () => {
    const scrollY = window.pageYOffset;

    if (Math.abs(scrollY - lastScrollY) < threshold) {
    // We haven't exceeded the threshold
    ticking = false;
    return;
    }

    setScrollDir(scrollY > lastScrollY ? SCROLL_DOWN : SCROLL_UP);
    lastScrollY = scrollY > 0 ? scrollY : 0;
    ticking = false;
    };

    const onScroll = () => {
    if (!ticking) {
    window.requestAnimationFrame(updateScrollDir);
    ticking = true;
    }
    };

    // Reset scroll direction if `off` is set to true
    !off
    ? window.addEventListener("scroll", onScroll)
    : setScrollDir(initialDirection);

    return () => window.removeEventListener("scroll", onScroll);
    });
    }, [initialDirection, thresholdPixels, off]);

    return scrollDir;
    };
  3. reecelucas revised this gist Apr 12, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion useScrollDirection.js
    View file
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@ const useScrollDirection = ({
    useEffect(() => {
    if (off) {
    // Reset scroll direction if `off` is set to true
    setScrollDir(undefined);
    setScrollDir(initialDirection);
    }
    }, [off]);

  4. reecelucas created this gist Apr 11, 2019.
    54 changes: 54 additions & 0 deletions useScrollDirection.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    const SCROLL_UP = "up";
    const SCROLL_DOWN = "down";

    const useScrollDirection = ({
    initialDirection,
    thresholdPixels,
    off
    } = {}) => {
    const [scrollDir, setScrollDir] = useState(initialDirection);
    const lastScrollY = useRef();
    const ticking = useRef(false);
    const threshold = thresholdPixels || 0;

    const updateScrollDir = () => {
    const scrollY = window.pageYOffset;

    if (Math.abs(scrollY - lastScrollY.current) < threshold) {
    // We haven't exceeded the threshold
    ticking.current = false;
    return;
    }

    setScrollDir(scrollY > lastScrollY.current ? SCROLL_DOWN : SCROLL_UP);
    lastScrollY.current = scrollY > 0 ? scrollY : 0;
    ticking.current = false;
    };

    const onScroll = () => {
    if (!ticking.current) {
    window.requestAnimationFrame(updateScrollDir);
    ticking.current = true;
    }
    };

    useEffect(() => {
    if (off) {
    // Reset scroll direction if `off` is set to true
    setScrollDir(undefined);
    }
    }, [off]);

    useEffect(() => {
    // Initialise scrollY to current scroll position
    lastScrollY.current = window.pageYOffset;

    if (!off) {
    window.addEventListener("scroll", onScroll);
    }

    return () => window.removeEventListener("scroll", onScroll);
    });

    return scrollDir;
    };