In Next.js is there a way to determine if if scrollRestoration was used, or even if the back button was used?

Question

I am using the scrollRestoration feature of Next.js to restore the page position when a back button is pressed. The problem, is that it doesn't restore the horizontal scroll position of the carousels on that page. So I have created my own session variables to track the position of each carousel and restore them on page load. The problem, is that I ONLY want to restore these scroll positions if the back/forward button was pressed. If there is an indicator that scrollRestoration was used on the page I could use that, otherwise, if there is an indication that the page was visited using the forward/back buttons that would also solve it.

Any ideas?

Regarding handling back/forward actions, does this help: [Want to have an event handler for the browser's back button with next.js](https://stackoverflow.com/questions/61932918/want-to-have-an-event-handler-for-the-browsers-back-button-with-next-js)? — juliomalves, May 16 '22 at 22:44

score 1 · Accepted Answer · answered Jun 03 '22 at 16:29

i have figured out how to determine if scrollRestoration is set for a page.

React.useEffect(() => {
    const hasScrollHistory = sessionStorage.getItem(`__next_scroll_${window.history.state.idx}`);
    if (hasScrollHistory) {
        // do your restore logic here
    }
}, []);

score 0 · Answer 2 · answered May 16 '22 at 19:31

Never done this but my instinct would be:

Make a wrapper component, expose the next/router in your component
Set up an useEffect that updates on router.pathName changes
Set up a condition in the effect that watches History.back()

That kind of goes around the framework, but it doesn't look like Next exposes what you're looking for.

In Next.js is there a way to determine if if scrollRestoration was used, or even if the back button was used?

2 Answers2