I have a strange implementation to do here, i don’t remember of seeing this in a site or web app.

I have a screen with some columns and cards inside them, currently these columns are in a container with a fixed size and scroll due to the overflow generated.

The client wants to somehow be able to scroll all columns at the same time when the mouse is outside the columns and scroll within the columns when the mouse is over them.

I achieved this effect (onClick for testing), but due to different column sizes the allMode scrolls stops when the mouse is over a short column or even a column with just one item, i’m searching for a way to scroll if i have other bigger column to scroll.

I tried to set the scrollHeight of the other columns based on the tallest column but apparently i can’t do that.

Link: https://codesandbox.io/p/sandbox/react-scroll-2-z29tmc

Thanks.

I tried to set the scrollHeight of the other columns based on the tallest column to allow me to scroll all columns even if the mouse is on the shortest column (allMode = true). But i find that you cannot set this property. I tried an implementation with a child div, but its broken the scroll modes feature.