Get scroll position with Reactjs

Question

I use reactjs and want to handle scroll with click event.

Firstly, I rendered list of posts with componentDidMount.

Secondly, by click event on each post in list, It will display post detail and scroll to top (because I put post detail to top position of page).

Thirdly, by clicking "close button" in post detail, it will return previous list of posts but I want website will scroll to exactly to position of clicked post.

I use like this:

Click event to view post detail:

inSingle = (post, e) => {
   this.setState({
        post: post,
        theposition: //How to get it here?
   });
   window.scrollTo(0, 0);
}

I want to get state of theposition then I can do scroll exactly to position of clicked post by 'Close event'.

Related, vanilla-JS canonical: Check if a user has scrolled to the bottom (not just the window, but any element) — TylerH
– TylerH, Commented Mar 3, 2023 at 18:49

GuCier · Accepted Answer · 2020-11-02 09:12:51Z

88

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.

edited Nov 2, 2020 at 9:12

GuCier

7,4851 gold badge32 silver badges40 bronze badges

answered Mar 16, 2020 at 15:36

Lucas Andrade

4,6285 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jared Beach Over a year ago

Appreciate the solution. However, saying useEffect is similar to componentDidMount is a little misleading. It runs every single render, not just the first. This code works still because window.addEventListener is smart enough to discard subsequent calls with the same parameters

skyshine Over a year ago

Always giving window.pageYOffset 0

ogie Over a year ago

He has the second argument to useEffect being an empty array, which is the similar to componentDidMount. If that wasn't there, it would be similar to componentDidUpdate.

Juice Over a year ago

In my solution I added [scrollPosition] as an argument, so it will only change if the state changes. Are there any pros or Cons? I'm relatively new to react.

EQuimper · Accepted Answer · 2019-02-08 22:06:24Z

57

You can use event listener in react like you will use in other js framework or library.

componentDidMount() {
  window.addEventListener('scroll', this.listenToScroll)
}

componentWillUnmount() {
  window.removeEventListener('scroll', this.listenToScroll)
}

listenToScroll = () => {
  const winScroll =
    document.body.scrollTop || document.documentElement.scrollTop

  const height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight

  const scrolled = winScroll / height

  this.setState({
    theposition: scrolled,
  })
}

edited Feb 8, 2019 at 22:06

answered Nov 5, 2018 at 16:59

EQuimper

5,9298 gold badges31 silver badges42 bronze badges

Comments

Sabbir Ahmed · Accepted Answer · 2024-02-25 16:59:10Z

35

This should work:

this.setState({
  post: post,
  theposition: window.pageYOffset
});

EDIT: To update the vertical position every time you scroll, you could utilize event listeners like this (also suggested by Lucas Andrade in a separate answer):

const [scrollYPosition, setScrollYPosition] = React.useState(0);

const handleScroll = () => {
    const newScrollYPosition = window.pageYOffset;
    setScrollYPosition(newScrollYPosition);
};

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

// Now the vertical position is available with `scrollYPosition`
console.log(scrollYPosition)

And here's a bit of trivia:

window.pageYOffset is an alias of window.scrollY property which returns the number of pixels that the document is currently scrolled vertically from the origin, i.e. Y coordinate of the top edge of the current viewport. If the document is not scrolled at all up or down, then scrollY is 0.

Similarly, you can get the number of pixels the document is scrolled horizontally from the origin using scrollX property (window.pageXOffset alias).

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

edited Feb 25, 2024 at 16:59

answered Nov 5, 2018 at 17:06

Sabbir Ahmed

1,7142 gold badges21 silver badges25 bronze badges

2 Comments

snoob dogg Over a year ago

it is bad no ? I mean if you setState, you reRender your component each time, seems to be better to combine useState and useEffect or useLayoutEffect

Werthis Over a year ago

github.com/n8tb1t/use-scroll-position use-scroll-position solves this by using throttling technic to avoid too many reflows (the browser to recalculate everything).

Bohdan Yashchuk · Accepted Answer · 2020-05-27 11:36:49Z

18

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

export default function useWindowPosition() {
  const [scrollPosition, setPosition] = useState(0);
  useLayoutEffect(() => {
    function updatePosition() {
      setPosition(window.pageYOffset);
    }
    window.addEventListener('scroll', updatePosition);
    updatePosition();
    return () => window.removeEventListener('scroll', updatePosition);
  }, []);
  return scrollPosition;
}

answered May 27, 2020 at 11:36

Bohdan Yashchuk

1811 silver badge2 bronze badges

2 Comments

Hamid Shoja Over a year ago

what's the point of using useLayoutEffect here ?

Sergei Over a year ago

Depends on what will you do with the scroll position, but generally, if you want to perform some DOM measurements (like getting scroll coordinates) it might be better to useLayoutEffect since it runs after DOM mutations have been performed but BEFORE the node gets painted on the screen. Hence if you will further mutate the DOM using that data, you will avoid stuff like screen flickering

lwdthe1 · Accepted Answer · 2022-02-16 20:37:31Z

Combining some of the other answers, this is exactly what is needed here. Simply use this hook to get the scrollX (horizontal) and scrollY (vertical) positions from the window. It'll be updated as the user scrolls.

/// in useWindowScrollPositions.js

import { useEffect, useState } from 'react'

export const useWindowScrollPositions = () => {

   const [scrollPosition, setPosition] = useState({ scrollX: 0, scrollY: 0 })

   useEffect(() => {
    function updatePosition() {
        setPosition({ scrollX: window.scrollX, scrollY: window.scrollY })
    }

    window.addEventListener('scroll', updatePosition)
    updatePosition()

    return () => window.removeEventListener('scroll', updatePosition)
   }, [])

   return scrollPosition
}

Then call the hook in your function component:

/// in MyComponent.jsx

import { useWindowScrollPositions } from 'path/to/useWindowScrollPositions'

export const MyComponent = () => {
   const { scrollX, scrollY } = useWindowScrollPositions()
   
   return <div>Scroll position is ({scrollX}, {scrollY})</div>
}

Note that window.pageXOffset and window.pageYOffset, which were used in the other answers from years ago, have been deprecated in favor of window.scrollX and window.scrollY

Mint · Accepted Answer · 2021-09-18 21:01:47Z

8

You can use the native react event listener.

<div onScroll={(e) => console.log("scrolling!", e.target.scrollTop)}>
    <h3>Some huge div</h3>
</div>

answered Sep 18, 2021 at 21:01

Mint

1,0892 gold badges20 silver badges34 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2018-11-05 17:03:43Z

4

Like this:

theposition: e.y // or, e.pageY

Or,

theposition: e.clientY - e.currentTarget.getBoundingClientRect().top

edited Nov 5, 2018 at 17:03

answered Nov 5, 2018 at 16:59

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Pavittar Singh · Accepted Answer · 2018-11-05 17:00:28Z

3

to get current scroll position you can use

horizontal scrolling amount window.pageXOffset

vertical scrolling amount window.pageYOffset

answered Nov 5, 2018 at 17:00

Pavittar Singh

555 bronze badges

Comments

aitbella · Accepted Answer · 2020-03-29 01:49:59Z

1

this repo helped me a lot https://github.com/n8tb1t/use-scroll-position

yarn add @n8tb1t/use-scroll-position

import { useScrollPosition } from '@n8tb1t/use-scroll-position'


useScrollPosition(({ prevPos, currPos }) => {
 console.log(currPos.x)
 console.log(currPos.y)
})

answered Mar 29, 2020 at 1:49

aitbella

1,10511 silver badges20 bronze badges

Comments

vancy-pants · Accepted Answer · 2021-09-23 00:26:36Z

1

Found this on MDN:

element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight

answered Sep 23, 2021 at 0:26

vancy-pants

1,37614 silver badges14 bronze badges

Comments

crystal · Accepted Answer · 2023-01-08 07:07:13Z

0

Use window.scrollY instead of window.pageYOffset(deprecated).

  const [scrollPosition, setScrollPosition] = useState(0);
  
  useEffect(() => {
    if (typeof window !== "undefined") {
      
      const handleScroll = () => {
        const position = window.scrollY;
        setScrollPosition(position);
      }

      window.addEventListener("scroll", handleScroll);
   
      return () => window.removeEventListener("scroll", handleScroll);
    }
  }, [])

answered Jan 8, 2023 at 7:07

crystal

2512 silver badges5 bronze badges

Comments

ABIN GEORGE · Accepted Answer · 2023-04-28 14:25:23Z

0

Also you can use a npm package to track the user scroll position https://www.npmjs.com/package/react-hook-collections

answered Apr 28, 2023 at 14:25

ABIN GEORGE

11 bronze badge

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Wongjn Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

Get scroll position with Reactjs

12 Answers 12

4 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

4 Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related