You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import { useEffect } from 'react';
|
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
|
|
|
|
let scrollPositions = {};
|
|
|
|
let timeout = null;
|
|
|
|
|
|
|
|
export function ManageScroll() {
|
|
|
|
const history = useHistory();
|
|
|
|
|
|
|
|
const scrollListener = () => {
|
|
|
|
if (timeout) {
|
|
|
|
window.cancelAnimationFrame(timeout);
|
|
|
|
}
|
|
|
|
|
|
|
|
timeout = window.requestAnimationFrame(() => {
|
|
|
|
const key = history.location.key;
|
|
|
|
if (key in scrollPositions) {
|
|
|
|
scrollPositions[key] = window.scrollY;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
window.addEventListener('scroll', scrollListener);
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener('scroll', scrollListener);
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const key = history.location.key;
|
|
|
|
|
|
|
|
if (key in scrollPositions) {
|
|
|
|
window.scrollTo(0, scrollPositions[key]);
|
|
|
|
} else {
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
scrollPositions[key] = 0;
|
|
|
|
}
|
|
|
|
}, [history.location]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
null
|
|
|
|
);
|
|
|
|
};
|