mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 14:13:21 +00:00
scroll position fix when entering new view
This commit is contained in:
parent
b3d90e04bf
commit
28102be435
@ -15,7 +15,11 @@ const listener = function () {
|
|||||||
window.addEventListener('popstate', listener);
|
window.addEventListener('popstate', listener);
|
||||||
|
|
||||||
const View = ({ children, hideHeader = false, hideSideBar = false }) => {
|
const View = ({ children, hideHeader = false, hideSideBar = false }) => {
|
||||||
const observerRef = useRef<any>(null);
|
const restoreScrollPosition = () => {
|
||||||
|
const currentHistoryState = window.history.state;
|
||||||
|
const position = currentHistoryState?.scrollPosition || 0;
|
||||||
|
window.scrollTo(0, position);
|
||||||
|
};
|
||||||
|
|
||||||
const saveScrollPosition = debounce(() => {
|
const saveScrollPosition = debounce(() => {
|
||||||
const position = window.scrollY || document.documentElement.scrollTop;
|
const position = window.scrollY || document.documentElement.scrollTop;
|
||||||
@ -27,46 +31,15 @@ const View = ({ children, hideHeader = false, hideSideBar = false }) => {
|
|||||||
window.history.replaceState(newHistoryState, '');
|
window.history.replaceState(newHistoryState, '');
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|
||||||
const restoreScrollPosition = (observe = true) => {
|
|
||||||
const currentHistoryState = window.history.state;
|
|
||||||
const previousHistoryState = window.history.state?.previousState;
|
|
||||||
if (!isInitialLoad && currentHistoryState !== previousHistoryState) {
|
|
||||||
observe && observeScrollElement();
|
|
||||||
const position = window.history.state?.scrollPosition || 0;
|
|
||||||
if (position) {
|
|
||||||
window.scrollTo(0, position);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const oldState = window.history.state || {};
|
|
||||||
const newHistoryState = {
|
|
||||||
...oldState,
|
|
||||||
previousState: currentHistoryState,
|
|
||||||
};
|
|
||||||
window.history.replaceState(newHistoryState, '');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const observeScrollElement = () => {
|
|
||||||
observerRef.current = new ResizeObserver((entries) => {
|
|
||||||
entries.forEach(() => {
|
|
||||||
restoreScrollPosition(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
observerRef.current.observe(document.body);
|
|
||||||
setTimeout(() => {
|
|
||||||
observerRef.current.disconnect();
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
restoreScrollPosition();
|
if (!isInitialLoad) {
|
||||||
|
restoreScrollPosition();
|
||||||
|
} else {
|
||||||
|
isInitialLoad = false;
|
||||||
|
}
|
||||||
window.addEventListener('scroll', saveScrollPosition);
|
window.addEventListener('scroll', saveScrollPosition);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (observerRef.current) {
|
|
||||||
observerRef.current.disconnect();
|
|
||||||
}
|
|
||||||
window.removeEventListener('scroll', saveScrollPosition);
|
window.removeEventListener('scroll', saveScrollPosition);
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
Loading…
Reference in New Issue
Block a user