pao ramen
pao ramen
Explore posts from servers
CDCloudflare DevelopersSSolidJS
PostsComments
SSolidJS
Created by pao ramen on 5/9/2024 in #support
scroll restoration
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.
16 replies
SSolidJS
Created by pao ramen on 5/9/2024 in #support
scroll restoration
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!
16 replies
SSolidJS
Created by pao ramen on 5/9/2024 in #support
scroll restoration
Ohh, that's actually a good clue. Will research on that direction
16 replies
SSolidJS
Created by pao ramen on 5/9/2024 in #support
scroll restoration
16 replies
SSolidJS
Created by pao ramen on 5/9/2024 in #support
scroll restoration
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.
16 replies
SSolidJS
Created by pao ramen on 5/9/2024 in #support
scroll restoration
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.
16 replies
SSolidJS
Created by pao ramen on 5/9/2024 in #support
scroll restoration
hmmm... not really, no? The normal browser behaviour is that going back restores the scroll
16 replies
SSolidJS
Created by pao ramen on 3/5/2024 in #support
How do I "curry" a function with props?
makes sense! thanks for your help
4 replies