Scroll Position

One of the more common playful elements on the web is having things move based on scroll position.

For example, the Remix homepage has a bunch of fun scroll-based effects. Notice how the page changes based on the scroll position:

In order to build effects like this, we need to know what the user's current scroll position is. This is the core piece of data upon which all such effects are built.

In this challenge, you'll build a way to track the current scroll position within React. We won't be building any scroll-based animations here, this challenge is all about the lower-level task of creating a reusable abstraction.

Difficulty

This challenge is similar in difficulty to some of the exercises in Module 3.

Rules

This playground comes with lodash installed, in case you wish to use it. Otherwise, you're not allowed to use any third-party libraries.
Feel free to google anything you'd like.

Playground

Code Playground

Acceptance criteria:

• The UI should always show the current scroll position.

• Your solution should be reusable, so that many different components can easily work with the scroll position.

• Think about what you might need to do to make your solution “production-ready”.

import React from 'react';

function App() {

return (

<h1>Scroll position:</h1>

{window.scrollY}

</>

);

}

export default App;

My attempt

Attempt code (success)

import React from 'react';

function App() {
  const { x: scrollX, y: scrollY } = useScrollPosition();

  return (
    <>
      {/*
        Adding a large width so that we can test
        X-axis scrolling:
      */}
      <h1 style={{ width: '200vw'}}>
        Scroll position:
      </h1>
      {scrollX} - {scrollY}
    </>
  );
}

function useScrollPosition() {
  const [scrollPosition, setScrollPosition] =
    React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    function handleScroll() {
      setScrollPosition({
        y: Math.round(window.scrollY),
        x: Math.round(window.scrollX),
      });
    }

    window.addEventListener('scroll', handleScroll);

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

  return scrollPosition;
}

export default App;