Skip to content

Instantly share code, notes, and snippets.

@wwwebman

wwwebman/In viewport React

Created May 5, 2021 07:30
Show Gist options
  • Save wwwebman/4d9f9fa39f8dd1ee167dc17a404438f6 to your computer and use it in GitHub Desktop.
Save wwwebman/4d9f9fa39f8dd1ee167dc17a404438f6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wwwebman created this gist May 5, 2021.
    16 changes: 16 additions & 0 deletions In viewport React
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    const handleScroll = () => {
    const pageYOffset = window.pageYOffset;
    const windowHeight = window.innerHeight;
    const elementOffsetTop = ref?.current?.offsetTop ?? 0;
    const elementHeight = ref?.current?.offsetHeight ?? 0;
    const scrollDirectionToTop = pageYOffset < prevPageYOffset.current;
    const distanceFromTop = pageYOffset + elementOffsetTop;
    const inViewport =
    pageYOffset >= elementOffsetTop - windowHeight &&
    pageYOffset <= elementOffsetTop + elementHeight;


    if (inViewport) {}

    prevPageYOffset.current = pageYOffset;
    };