Scroll management for history.
If you are using React Router, check out react-router-scroll, which wraps up the scroll management logic here into a router middleware.
import createHistory from 'history/lib/createBrowserHistory';
import withScroll from 'scroll-behavior';
const history = withScroll(createHistory());$ npm i -S history
$ npm i -S scroll-behavior
Extend your history object using withScroll. The extended history object will manage the scroll position for transitions.
You can customize the scroll behavior by providing a shouldUpdateScroll callback when extending the history object. This callback is called with both the previous location and the current location.
You can return:
- a falsy value to suppress the scroll update
- a position array such as
[0, 100]to scroll to that position - a truthy value to get normal scroll behavior
const history = withScroll(createHistory(), (prevLocation, location) => (
// Don't scroll if the pathname is the same.
!prevLocation || location.pathname !== prevLocation.pathname
));const history = withScroll(createHistory(), (prevLocation, location) => (
// Scroll to top when attempting to vist the current path.
prevLocation && location.pathname === prevLocation.pathname ? [0, 0] : true
));The withScroll-extended history object has a registerScrollElement method. This method registers an element other than window to have managed scroll behavior on transitions. Each of these elements needs to be given a unique key at registration time, and can be given an optional shouldUpdateScroll callback that behaves as above.
const history = withScroll(createHistory(), () => false);
history.listen(listener);
history.registerScrollElement(
key, element, shouldUpdateScroll
);The registerScrollElement method returns an unregister function that you can use to explicitly unregister the scroll behavior on the element, if necessary. In general, you will not need to do this, as withScroll will perform all necessary cleanup on removal of the last history listener.