React --> One horizontal scroll bar to handle a multi-div timeline
I'm trying to make a timeline that has multiple rows:
[Group A Div
[Div A Title here]: [Div A with multiple elements inside]
[Div B Title]: [Div B with multiple element inside]
etc.
]
[Group B Div
[Div A Title here]: [Div A with multiple elements inside]
[Div B Title]: [Div B with multiple element inside]
etc.
]
...more groups + nested divs.
---> somewhere at the bottom there should be a scrollbar that basically detects if there is overflow in each of the groups sub-divs and scroll those all at once to the right.
Any thoughts on this design and how its possible?
2 Replies
Maybe something where the columns use
position: sticky with multi-side anchoring and the anchors' offset is computed so that there's no scrolling in either column and it only scrolls using the container's scrollbar?
No concrete solution, sorry, just throwing some idea.Where is the scrollbar ? Is it on the window or on the parent of Group A and Group B or on each group itself? Can you share your code?
I'm thinking you can check the inmerWidth vs the clientWidth or use a resizeObserver or chevk for a horizontal scrollbar but so much depends on where the scrolling is going to occur and what the scrolling container is