Uh oh!
There was an error while loading. Please reload this page.
Please tell me how to restore scrolling when using measureElement. #731
Answered
byshunshimono
shunshimono
asked this question in
Q&A
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Reference DiscussionIssueRestoring the scroll position during the initial rendering using the value saved in session storage Expected BehaviorThe scroll position should be restored when returning to the page Confirmed
My Code"use client";import{useWindowVirtualizer,observeWindowOffset,measureElementasdefaultMeasureElement,}from"@tanstack/react-virtual";import{useRef}from"react";importLinkfrom"next/link";import{faker}from"@faker-js/faker";constrandomNumber=(min: number,max: number)=>faker.datatype.number({ min, max });constsentences=newArray(100).fill(true).map(()=>faker.lorem.sentence(randomNumber(20,70)));exportdefaultfunctionPage(){constlistRef=useRef<HTMLDivElement|null>(null);constcachedSizesRef=useRef<Map<number,number>>(newMap());constmeasureElement=(element: Element,entry: ResizeObserverEntry|undefined,instance: any,)=>{constindex=instance.indexFromElement(element);constsize=defaultMeasureElement(element,entry,instance);cachedSizesRef.current.set(index,size);returnsize;};constvirtualizer=useWindowVirtualizer({count: 100,estimateSize: ()=>35,overscan: 5,
measureElement,initialOffset: (()=>{if(typeofsessionStorage!=="undefined"){returnparseInt(sessionStorage.getItem("virtualizer_scrollOffset")||"",);}return0;})(),observeElementOffset: (instance,cb)=>{returnobserveWindowOffset(instance,(offset)=>{if(typeofsessionStorage!=="undefined"){sessionStorage.setItem("virtualizer_scrollOffset",offset?.toString(),);}cb(offset,instance.isScrolling);});},});return(<><divref={listRef}className="List"><divstyle={{height: `${virtualizer.getTotalSize()}px`,width: "100%",position: "relative",}}>{virtualizer.getVirtualItems().map((item)=>(<divkey={item.key}ref={virtualizer.measureElement}data-index={item.index}className={item.index%2 ? "ListItemOdd" : "ListItemEven"}style={{position: "absolute",top: 0,left: 0,width: "100%",transform: `translateY(${item.start}px)`,}}><h1>Row {item.index}</h1><Linkhref={"/about"}>about</Link><p>{sentences[item.index]}</p></div>))}</div></div></>);}Environment |
Answered by
shunshimono
May 17, 2024
Replies: 1 comment 3 replies
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
I've found that while the scroll position is set to the correct value, the elements that were originally at that scroll position are not being displayed when restored. |
3 replies
Yes, as you need store also |
@piecyk Resumable code"use client";import{useWindowVirtualizer}from"@tanstack/react-virtual";import{useRef,useEffect}from"react";importLinkfrom"next/link";import{faker}from"@faker-js/faker";constrandomNumber=(min: number,max: number)=>faker.datatype.number({ min, max });constsentences=newArray(100).fill(true).map(()=>faker.lorem.sentence(randomNumber(20,70)));exportdefaultfunctionPage(){constlistRef=useRef<HTMLDivElement|null>(null);constvirtualizer=useWindowVirtualizer({count: 100,estimateSize: ()=>35,overscan: 5,initialOffset: (()=>{if(typeofsessionStorage!=="undefined"){returnparseInt(sessionStorage.getItem("virtualizer_scrollOffset")||"",);}return0;})(),initialMeasurementsCache: (()=>{if(typeofsessionStorage==="undefined")return;constsavedCache=sessionStorage.getItem("virtualizer_measurementsCache",);returnsavedCache ? JSON.parse(savedCache) : undefined;})(),});useEffect(()=>{sessionStorage.setItem("virtualizer_measurementsCache",JSON.stringify(Array.from(virtualizer.measurementsCache)),);},[virtualizer.measurementsCache]);return(<divref={listRef}className="List"><divstyle={{height: `${virtualizer.getTotalSize()}px`,width: "100%",position: "relative",}}>{virtualizer.getVirtualItems().map((item)=>(<divkey={item.key}ref={virtualizer.measureElement}data-index={item.index}className={item.index%2 ? "ListItemOdd" : "ListItemEven"}style={{position: "absolute",top: 0,left: 0,width: "100%",transform: `translateY(${item.start}px)`,}}><h1>Row {item.index}</h1><Linkhref={"/about"}onClick={()=>{sessionStorage.setItem("virtualizer_scrollOffset",document.documentElement.scrollTop?.toString(),);}}>
about
</Link><p>{sentences[item.index]}</p></div>))}</div></div>);} |
Answer selected byshunshimono
@shunshimono thank you! |
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
@piecyk
Thank you. I was able to resolve it by saving measurementsCache to storage when leaving the page, and setting that value to initialMeasurementsCache when remounting.
Resumable code