SolidJS•7mo ago

scroll restoration

For some reason, when using solid-router, it does not do scroll restoration properly. I have a list of elements, I scroll to the bottom, I click on one element and when I hit the back button. Customers expect to go back to the bottom of that list, but for some reason it scrolls to the top. I've tried to debug it, and it does not call scrollToHash so I really don't know what else to look at. Thanks in advance!

10 Replies

Unknown User•7mo ago

Message Not Public

pao ramenOP•7mo ago

hmmm... not really, no? The normal browser behaviour is that going back restores the scroll just go to google, search something, scroll, click on a result, and go back. This is so ingrained in how we navigate that when it does not work is an awful experience for users.

bigmistqke•7mo ago

I am not sure if scroll restoration is something that csr routers normally implement. ~~I don't think so, but I might be wrong.~~ I was wrong nextjs and remix do seem to have some form of scroll-restoration: - https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#disabling-scroll-restoration - https://remix.run/docs/en/main/components/scroll-restoration according to https://github.com/solidjs/solid-router/issues/99#issuecomment-1100209353 they rely on browser's https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

I've tried to debug it, and it does not call scrollToHash

what do you mean with scrollToHash?

pao ramenOP•7mo ago

yes, I saw that thread but it does not seem to work. scrollToHash is how solid-router forces to scroll to the top when clicking on a link or using programatic navigation. So I just wanted to add more information on this thread that it is not a case of that.

pao ramenOP•7mo ago

bigmistqke•7mo ago

I suppose scrollToHash will only be called when there is a hash present. Are u using the HashRouter? I wonder if the browser's default scroll-restoration works too if it's a scrollable div and not the body that is scrollable 🤔 just picking straws here.

pao ramenOP•7mo ago

Ohh, that's actually a good clue. Will research on that direction oh my, that was it. Totally unrelated to solid router. I had overflow: scroll on the body, and the browser is obviously not that smart. Thanks!

bigmistqke•7mo ago

awesome! glad you found the solution!

pao ramenOP•7mo ago

btw, if anyone is searching for scroll restoration and they want to also have link support, this works beautifully:

import { useBeforeLeave, useLocation } from '@solidjs/router'
import { createEffect } from 'solid-js'

const SCROLLS = new Map()

export function useScrollRestoration() {
    const location = useLocation()

    useBeforeLeave(({ from }) => {
        SCROLLS.set(from.pathname, document.documentElement.scrollTop)
    })

    createEffect(() => {
        const scroll = SCROLLS.get(location.pathname)
        if (!scroll) return

        document.documentElement.scrollTop = scroll
    })
}

import { useBeforeLeave, useLocation } from '@solidjs/router'
import { createEffect } from 'solid-js'

const SCROLLS = new Map()

export function useScrollRestoration() {
    const location = useLocation()

    useBeforeLeave(({ from }) => {
        SCROLLS.set(from.pathname, document.documentElement.scrollTop)
    })

    createEffect(() => {
        const scroll = SCROLLS.get(location.pathname)
        if (!scroll) return

        document.documentElement.scrollTop = scroll
    })
}

You will need to use noScroll in the links that you want, otherwise solid-router will default to scrolling to the top.

rpivo•3mo ago

I tried a few things to programmatically set the scroll point for a specific item in history, but using useBeforeLeave to do it was what did it for me

Gaming

Programming

scroll restoration