How to restore the scrollbar to its previous position

[irychen]

export function useScrollMemo(containerRef: RefObject<HTMLDivElement>) {
    const historyScrollTop = useRef(0)
    const { active } = useKeepAliveContext()

    useEffect(() => {
        if (active) {
            containerRef.current?.scrollTo(0, historyScrollTop.current)
        }
    }, [active])

    useEffect(() => {
        const divDom = containerRef.current
        if (!divDom) return
        const onScroll = (e: Event) => {
            const target = e.target as HTMLDivElement
            if (!target) return
            historyScrollTop.current = target?.scrollTop || 0
        }
        divDom?.addEventListener("scroll", onScroll)
        return () => {
            divDom?.removeEventListener("scroll", onScroll)
        }
    }, [])
}

参考一下

[escfex]

感谢

[Muhammad-96]

@irychen Scrolling does not occur. Does this solution work for you? I assume that scrolling occurs until the component appears in the DOM

[irychen]

@irychen Scrolling does not occur. Does this solution work for you? I assume that scrolling occurs until the component appears in the DOM

you need extra hook like above or just use the MemoScrollTopWrapper component https://stackblitz.com/github/irychen/keepalive-for-react/tree/main/examples/react-router-dom-simple-starter?file=src%2Flayout%2Findex.tsx