Skip to content

Instantly share code, notes, and snippets.

@antoniocapelo

antoniocapelo/use-scroll-listener.js

Last active July 8, 2019 09:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save antoniocapelo/95dc3e25cd495191d78afac905d344d4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save antoniocapelo/95dc3e25cd495191d78afac905d344d4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. antoniocapelo revised this gist Mar 30, 2019. 1 changed file with 7 additions and 2 deletions.
    9 changes: 7 additions & 2 deletions use-scroll-listener.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,7 @@ import { useState, useRef, useEffect } from 'react';

    export function useScroll() {
    const [scrollY, setScrollY] = useState(0);
    const [progress, setProgress] = useState(0);
    const previousScrollY = useRef();
    const [scrollDirection, setScrollDirection] = useState("down");

    @@ -19,19 +20,23 @@ export function useScroll() {
    const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
    setScrollY(scrollTop);
    setProgress(
    scrollTop / (document.documentElement.offsetHeight - window.innerHeight)
    );

    const direction = previousScrollY.current < scrollTop ? "down" : "up";
    setScrollDirection(direction);
    }

    window.addEventListener("scroll", listener, false);
    window.addEventListener("scroll", listener, { passive: true });
    return () => {
    window.removeEventListener("scroll", listener, false);
    window.removeEventListener("scroll", listener, { passive: true });
    };
    }, []);

    return {
    scrollY,
    progress,
    scrollDirection
    };
    }
  2. antoniocapelo revised this gist Mar 30, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion use-scroll-listener.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    * Usage: const { scrollY, scrollDirection } = useScrollListener();
    */

    import { useState, useEffect } from 'react';
    import { useState, useRef, useEffect } from 'react';

    export function useScroll() {
    const [scrollY, setScrollY] = useState(0);
  3. antoniocapelo revised this gist Mar 30, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion use-scroll-listener.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    * Usage: const { scrollY, scrollDirection } = useScrollListener();
    */

    import { useReducer, useEffect } from 'react';
    import { useState, useEffect } from 'react';

    export function useScroll() {
    const [scrollY, setScrollY] = useState(0);
  4. antoniocapelo revised this gist Mar 30, 2019. 1 changed file with 20 additions and 28 deletions.
    48 changes: 20 additions & 28 deletions use-scroll-listener.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,41 +5,33 @@

    import { useReducer, useEffect } from 'react';

    function reducer(state, action) {
    switch (action.type) {
    case 'set':
    return {
    scrollY: action.payload.scrollY,
    scrollDirection: action.payload.scrollY > state.scrollY ? 'down' : 'up'
    };
    }
    }
    export function useScroll() {
    const [scrollY, setScrollY] = useState(0);
    const previousScrollY = useRef();
    const [scrollDirection, setScrollDirection] = useState("down");

    export function useScrollListener() {
    const [state, dispatch] = useReducer(reducer, {
    scrollY: 0,
    scrollDirection: 'down'
    useEffect(() => {
    previousScrollY.current = scrollY;
    });

    function listener() {
    const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
    dispatch({
    type: 'set',
    payload: {
    scrollY: scrollTop
    }
    });
    }

    useEffect(() => {
    window.addEventListener('scroll', listener, false);
    function listener() {
    const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
    setScrollY(scrollTop);

    const direction = previousScrollY.current < scrollTop ? "down" : "up";
    setScrollDirection(direction);
    }

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

    return {
    ...state
    scrollY,
    scrollDirection
    };
    }
    }
  5. antoniocapelo created this gist Mar 12, 2019.
    45 changes: 45 additions & 0 deletions use-scroll-listener.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    /**
    * useScrollListener hook
    * Usage: const { scrollY, scrollDirection } = useScrollListener();
    */

    import { useReducer, useEffect } from 'react';

    function reducer(state, action) {
    switch (action.type) {
    case 'set':
    return {
    scrollY: action.payload.scrollY,
    scrollDirection: action.payload.scrollY > state.scrollY ? 'down' : 'up'
    };
    }
    }

    export function useScrollListener() {
    const [state, dispatch] = useReducer(reducer, {
    scrollY: 0,
    scrollDirection: 'down'
    });

    function listener() {
    const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
    dispatch({
    type: 'set',
    payload: {
    scrollY: scrollTop
    }
    });
    }

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

    return {
    ...state
    };
    }