How to properly use ref with indiana drag scroll to set initial scroll position?

[dnh33]

I've been trying to implement the initial scroll from https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q?file=/index.js:317-382

But haven't had much luck getting the ref to work it seems, or perhaps it is something with the render cycle.

Here is my code to reference with the codesandbox:

export default function ProjectCarousel() {
     const container = useRef(null);
   
     useEffect(() => {
       container.current.getElement().scrollTo(0, 240);
     }, []);
   
     return (
       <ScrollContainer className="scroll-container" ref={container}>
         {ProjectData.map(({ id, ...otherProps }) => (
           <ProjectImage key={id} {...otherProps} />
         ))}
       </ScrollContainer>
     );
   }
   

Thanks for any help in advance

[Norserium]

@dnh33, I can't answer on your question without additional details. As you can see, the code works in the sandbox, so it's not the library issue.

But I can assume, that the ProjectData (why its first letter is capital, by the way) is loaded after the ProjectCarousel mounted. Try to set ProjectData as the dependency of useEffect for the test purpose.

[Norserium]

Sometimes it doesn't register it still tho, would it be more effective to use the innerRef method?

No, it should not be more effective in this terms.

On first initial page render, it seems to still be on the top of the 1st image, but if I navigate to /contact and back, it render with the scroll position

Perhaps, because image were cached.

[dnh33]

Thanks a bunch - that was it 👍🏻

It was the static height that was required applied on the div around the img tag

[dnh33]

Perhaps you could also answer how I can make the container scrollable with the mouse wheel on desktop after the website has been built. It seems to work in development mode only.

[Norserium]

@dh33, the temporary solution is the setting for the container element the following style:

.container {
    overflow: auto !important;
}

I should figure out something better, but that's what we got so far.

[dnh33]

that's perfect 👍🏻