React Get Scroll Position

Learn how to get scroll position with React in this easy tutorial. Whether you want to track the scroll position of a component, a div, or the window, we have the solution for you. React get scroll position is a useful skill for creating dynamic and interactive web pages with React. Find out how to use React hooks, refs, and events to get scroll position with React.

written

reviewed

updated

How to Get Scroll Position in React?

React Get Element Scroll Position: In React.js, to obtain the scroll position of an element, you can utilize the useRef hook and the scrollTop property. Begin by creating a reference with the useRef hook. Next, associate this reference with the desired element using the ref attribute. Finally, you can retrieve the scroll position by accessing the scrollTop property of the reference. This technique allows you to determine the vertical scroll position of an element. For horizontal scrolling, a similar approach can be used, but you would instead access the scrollLeft property of the element's reference to obtain the horizontal scroll position

React Get Scroll Position of ref

<script type="text/babel">
      const { useState, useEffect, useRef } = React;

      function App() {
        const myElementRef = useRef(null);
        const [positionTop, setPositionTop] = useState(0);
        const [positionLeft, setPositionLeft] = useState(0);

        useEffect(() => {
          const handleScroll = () => {
            const el = myElementRef.current;
            setPositionTop(el.scrollTop);
            setPositionLeft(el.scrollLeft);
          };

          const element = myElementRef.current;
          element.addEventListener("scroll", handleScroll);

          return () => {
            element.removeEventListener("scroll", handleScroll);
          };
        }, []);

        return (
          <div className="container">
            <h3>React Get Element Scroll Position</h3>
            <div ref={myElementRef}>
              <p>
                Font Awesome is a popular icon set used by designers and
                developers worldwide. It was created by Dave Gandy in 2012 and
                has since become one of the most widely used icon sets on the
                web.
                <br />
                Font Awesome icons are vector-based, which means they can be
                scaled to any size without losing their quality or becoming
                pixelated.
              </p>
          
            </div>
            <p>Scroll Top: {positionTop} px</p>
            <p>Scroll left: {positionLeft} px</p>
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of Get Scroll Position of Element React

How to Check Scroll Position with javascript?

If you want to learn how to get and set the scroll position of an element using JavaScript, this Example is for you. You will discover how to use the scrollTop and scrollLeft properties to access the vertical and horizontal offset of an element’s content. You will also see how to use the window.scrollTo() method to scroll the entire window to a specific position. Whether you are working with the document.body or a specific <div>, this article will show you how to manipulate the scroll position of an element with JavaScript.

Javascript scroll position

 <script>
        // Function to update the scroll position
        function updateScrollPosition() {
            var scrollPosition = window.scrollY;
            document.getElementById('scrollPosition').innerText = "Scroll Position: " + scrollPosition;
        }

        // Attach the function to the scroll event
        window.addEventListener('scroll', updateScrollPosition);

        // Initial update
        updateScrollPosition();
</script>

Run

Output of Javascript get scroll position

Pasted Image

React JS Tutorial