"shouldUpdateScroll" "getSavedScrollPosition" always returns NULL?

Summary

When trying to get the scroll position with getSavedScrollPosition in gatsby-browser.js the output of console.log is always null. I’m not sure if this is correct?

I’m trying to exclude one page/route from the standard „start at top of the page“-behaviour.
The reason for this is that I have a long list of articles on this page. When the user clicks on a <Link> somewhere down on this list, he is taken to the top of the article (which is wanted in this case). But when he then clicks the close/back-link of the on-page-navigation he is taken back to the top of the listing-page and has to scroll down all the way again to where he left off. (When he uses the back-button of the browser, instead of the on-page-navigation, he is correctly taken back to right scroll position of the previous page.) I opted out of using browser-history-api because I also have next/prev-links on the article and want the user to always return to the listing-page when he is using the close/back-link.

Steps to reproduce

Go to this Gatsby-Starter-Sandbox, reload the preview. Open up the console below and navigate the page. (Beside editing gatsby-browser.js I only added some paragraphs and changed headlines on the pages)

Changing routerProps to prevRouterProps will return the right coordinates for currentPosition from SessionStorage. But not for queriedPosition.

Expected result

const queriedPosition = getSavedScrollPosition({ pathname: `/page-2/` })

should give an Array of the last saved coordinates from the given location. As described in the shouldUpdateScroll documentation which then can be used to scroll to the right position on the given route.

Actual result

const queriedPosition = getSavedScrollPosition({ pathname: `/page-2/` })`

returns null. (I also tried /page-2, and even page-2, or /)

Therefore every new page is scrolled to top on navigation, even when trying to go to the last scroll position of a queried route via window.scrollTo(...(queriedPosition || [0, 0])).

SessionStorage is populated with the right saved and actual @@scroll-values.

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js:

exports.shouldUpdateScroll = ({
  routerProps: { location },
  // routerProps returning NULL.
  // -------------
  // Using prevRouterProps returns scroll coordinates of last route
  // comment out next line for demonstration
  // prevRouterProps: { location },
  getSavedScrollPosition
}) => {
  const currentPosition = getSavedScrollPosition(location)
  const queriedPosition = getSavedScrollPosition({ pathname: `/page-2/` })

  console.log("currentPosition result:", currentPosition)
  console.log("queriedPosition result:", queriedPosition)

  //window.scrollTo(...(queriedPosition || [0, 0]))

  return false
}

gatsby-ssr.js: N/A

[adamschwartz]

@blainekasten Thank you!

I had the same issue and your suggestion worked for me.

It looks like the docs for shouldUpdateScroll may be incorrect then:

I suspect that’s how OP got their code as well. Hope this helps!

[magnusarinell]

I couldn’t get it working so I solved it manually doing:

const getLatestSavedScrollPosition = (pathname) => {
    let n = sessionStorage.length;
    let i = 0;

    const partialKey = `@@scroll|${pathname}|`

    let results = [];

    while (++i < n) {
        const key = sessionStorage.key(i);
        
        if (key.includes(partialKey)) {
            results.push(key)
        }
    }

    if (results.length === 0) {
        return 0;
    }

    results.sort();

    return sessionStorage.getItem(results[results.length - 1]);
}

Called from shouldUpdateScroll like this:

        const currentPosition = getLatestSavedScrollPosition(routerProps.location.pathname)

Edit: Code is now available at https://github.com/magnusarinell/istoriez.com