Get scroll position with Reactjs

by

In case you need to keep on track of the scroll position, you can use react hooks to do so, that way it’s possible to check the scroll position any time you need it:

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

...
// inside component:

const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
    const position = window.pageYOffset;
    setScrollPosition(position);
};

useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

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

In this case useEffect will behavior similar to componentDidMount, it will fire once the component has rendered, but also in every render, as Jared Beach commented bellow: “window.addEventListener is smart enough to discard subsequent calls with the same parameters”. . Make sure to return the cleanup function, similar to what you’d do in componentWillUnmount.

More Related Contents:

  1. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  2. OnChange event using React JS for drop down
  3. How to use Redirect in version 5 of react-router-dom of Reactjs
  4. Link tag inside BrowserRouter changes only the URL, but doesn’t render the component
  5. how to download file in react js
  6. OnClick Event binding in React.js
  7. What is event pooling in react?
  8. React doesn’t reload component data on route param change or query change
  9. Can I add a key prop to a React fragment?
  10. How to add multiple classes to a ReactJS Component?
  11. How to import image (.svg, .png ) in a React Component
  12. Typescript: React event types
  13. componentDidMount called BEFORE ref callback
  14. firebase.auth is not a function
  15. Use componentWillMount or componentDidMount lifecycle functions for async request in React
  16. How to loop an object in React?
  17. Best way to polyfill ES6 features in React app that uses create-react-app
  18. How to update state with usestate in an array of objects?
  19. Determine which dependency array variable caused useEffect hook to fire
  20. What does “export default” do in JSX?
  21. Axios – DELETE Request With Request Body and Headers?
  22. Updating state to the same state directly in the component body
  23. reactjs and masonry layout – undefined
  24. Jest – SyntaxError: Cannot use import statement outside a module
  25. Does strict mode work differently with React 18?
  26. Component won’t update when a redux state change occurs
  27. React: adding props to an existing component
  28. React Hooks render twice
  29. React Functional component: calling as function vs. as component
  30. Enzyme simulate an onChange event

Leave a Comment