Correctly set scroll position when route changes.
It's mostly usefull when working with animated routes, so that you can control when the scroll position should be set correctly.
``
npm install react-router-scroll-position --save
Using Yarn:
`
yarn add react-router-scroll-position
`js`
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
attribute to all elements that are fixed position and should be distracted for calculation of position.`js
`$3
Use the two helper functions provided by the library.#### setScrollPosition
Used to set the scroll position when a route is mounted.
js
import { setScrollPosition } from 'react-router-scroll-position';
`Accepts one argument:
js
componentDidMount() {
setScrollPosition(history);
}
`#### storeScrollPosition
Used to store the scroll position when a route is unmounted.
Use this on the component with the
from react-router (docs).
Make sure the component has access to the history object's properties, for instance by using withRouter (docs).`js
import {
getScrollPosition,
storeScrollPosition,
} from 'react-router-scroll-position';getSnapshotBeforeUpdate(prevProps, prevState) {
return getScrollPosition();
}
componentDidUpdate(prevProps, prevState, scrollTop) {
const { location } = prevProps;
storeScrollPosition(location, scrollTop);
}
``